Notifications
Clear all

[Solved] How to change color of font awesome icons

6 Posts
2 Users
0 Reactions
216 Views
Posts: 3
Topic starter
(@tblake)
Active Member
Joined: 1 month ago

I am using the extended layout. I want to change the colors of the font-awesome icons to be different colors for different icons. 

Example: I want the fa-comments icon to be green when there are no new posts and blue when there are new/unread posts, AND I want the icon I use for information to be pink when there are no new posts and red when there are new posts.

This is just an example, but I want to be able to change both colors of each icon.

Is this possible?

5 Replies
Tutrix
Posts: 1341
(@tutrix)
Noble Member
Joined: 4 years ago

@tblake 

You can customize the colors using CSS

An example

#wpforo #wpforo-wrap .wpfl-1 .wpforo-forum .wpfcl-0 {color:#29b21d !important;}
#wpforo #wpforo-wrap .wpfl-1 .wpf-unread-forum .wpforo-forum-icon i,
#wpforo #wpforo-wrap .wpfl-1 .wpforo-subforum .wpf-unread-forum i{ color:#ff6600 !important;}

 

Posts: 3
Topic starter
(@tblake)
Active Member
Joined: 1 month ago

Thank you @tutrix !

 

One follow up question - is it possible to have different colors for different icons also? Or does every icon have to be the same color for no new posts and the same different color for unread posts?

2 Replies
Tutrix
(@tutrix)
Joined: 4 years ago

Noble Member
Posts: 1341

@tblake 

New and unread posts are the same. 😉 
You can change the color of the additional new button if you like.

(@tblake)
Joined: 1 month ago

Active Member
Posts: 3

@tutrix 

 

Sorry, I got the wording wrong!

 

So I'm looking to see if I can make the fa-comments icon green when there are new posts and blue when the post has been read.

and then also make the fa-info-circle icon pink where there are new posts and red when the post has been read. 

 

So the coloring would be specific to each icon used. Is this possible?

 

Thank you!!

Tutrix
Posts: 1341
(@tutrix)
Noble Member
Joined: 4 years ago

@tblake 

You can also format the icons directly by using the "class" instead of the general "i".

Example Footer Icons

.wpf-no-new .fas.fa-comments {
  color: #f00 !important;
}
.wpf-new .fas.fa-comments {
  color: #34b605 !important;
}

Use the browser developer tools to see which CSS path to use.