Notifications
Clear all

wpForo 1.x.x Some Icons are Rectangles

8 Posts
4 Users
1 Likes
751 Views
Chozen1
Posts: 7
Topic starter
(@chozen1)
Active Member
Joined: 3 years ago

Hello earlier this week you helped me fix my posts icon by using this code. 

#wpforo #wpforo-wrap .fa-reply::before {
content: "\f112" !important;
}

That worked for posts icon but some of my other icons are still rectangles which includes: Latest Post:, Unread Posts, and Login Button. Can you please help me? 

Thank you, Look forward to talking to you soon… 

7 Replies
Alvina
Posts: 1872
Moderator
(@alvina)
Member
Joined: 3 years ago

Hi @chozen1,

Please leave the example URL to allow us to check it.

Reply
3 Replies
Chozen1
(@chozen1)
Joined: 3 years ago

Active Member
Posts: 7
Sofy
 Sofy
Admin
(@sofy)
Joined: 5 years ago

Support Team
Posts: 4057

@chozen1,

Try the following CSS code. It should solve the issue:

.fas{
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}

The CSS code should be added in the "Custom CSS code" textarea, located in the Dashboard > Forums > Settings > Style Tab.  

Please don't forget to delete all caches and press Ctrl+F5 (twice) on the frontend before checking to reload the updated CSS file.   

Reply
Chozen1
(@chozen1)
Joined: 3 years ago

Active Member
Posts: 7

@sofy

I am still having the same problem.

Thank you, Look forward to talking to you soon… 

 

 

Reply
Robert
Posts: 9912
Admin
(@robert)
Support Team
Joined: 7 years ago

@chozen1,

Do you know that your website theme uses a very old outdated Font-Awesome Lib? Its outdated lib affects all wpForo icons. We recommend either:

1. Find an option in your theme and disable the Font-Awesome Lib. Then navigate to Dashboard > Forums > Settings > Features admin page and enable wpForo Font-Awesome for whole website:

 

2. OR put this CSS code in Dashboard > Forums > Settings > Styles > Custom CSS Code textarea. Save it delete all caches and check it.

#wpforo #wpforo-wrap .fas{
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    top: 0 !important;
}
#wpforo #wpforo-wrap .far{
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
    top: 0 !important;
}
#wpforo #wpforo-wrap .fab{
    font-family: "Font Awesome 5 Brands" !important;
    top: 0 !important;
}

 

IMPORTANT: The both solutions will fix all icons. So you should remove the old CSS code we provided before. i mean this CSS code should be removed:

#wpforo #wpforo-wrap .fa-reply::before {
      content: "\f112" !important;
}
Reply
2 Replies
Chozen1
(@chozen1)
Joined: 3 years ago

Active Member
Posts: 7

@robert,

I will make changes shortly. 

Thank you, Look forward to talking to you soon… 

 

Reply
Chozen1
(@chozen1)
Joined: 3 years ago

Active Member
Posts: 7

@Robert

You're the Man! That fixed me right up! You're a true blessing to WPForo! 

Thank You! 

God Bless You!!! 

 

Reply