Jump to content

Font Awesome Forum Icons (Support Topic)


Recommended Posts

  • 2 weeks later...

There's really not much of an option page. To change icons and color, follow these steps:

  1. Go your ACP 
  2. Go to the Customization ribbon 
  3. Go to Themes
  4. Edit the theme you want (the </> icon)
  5. Go to the CSS tab
  6. In the custom category that opens by default, you will find a file 'forumicons.css'. Open that file by clicking on it.

For the forums that I have set up to start with, you will find this:

.forumIcon_2:before {
  content: "\f0f4";
  color: #FFEB42;

the _2 is the ID of your forum. If you want to change icons of more forums, just copy this part and change the _2 to the ID of the forum that you want to change the icon and color of.

The 'content: "\f0f4";' part is where you can define the icon that you want to use. To find another icon, go to: http://fortawesome.github.io/Font-Awesome/icons/. Pick the icon you want and click on it on that page. You will see a page like this: http://fortawesome.github.io/Font-Awesome/icon/beer/. Now find the unicode for this icon: Screen_Shot_2015-06-27_at_12.29.36.thumb

and change the content to the unicode, in this case: content: "\f0fc"; The colors are pretty straightforward.

To change the background of the icon, find this code:

.fIconC_2 {
	background-color: #00C600 !important;
	background-image: -webkit-linear-gradient(135deg, #00C600 50%,#78E03A 0%) !important;

Again, copy this code and change the _2 to the ID of the forum and then change the color codes (#ABABAB) to the colors of your liking.

Hope this is of help :) Let me know if you need any further assistance! 


Link to comment
  • 2 weeks later...
  • 3 weeks later...

@Tracy Perry, would you mind sharing the how to ? Thanks

There are probably "better" ways of doing it, but I'm still learning IPS templating.

I simply - in the <head></head> area of the globalTemplate - include a call to the custom stylesheet I have created

<link rel="stylesheet" href="//mysite.com/css/font_styles.css">

and then you can either call it by the character mapping or class mapping (depending on where you are using it).

For the nodes as show above, I'm simply using (in custom.css) 

.cForumList [data-forumID="18"] .ipsItemStatus > .fa:before {  
font-family: custom_icons-font !important;
content: "9"!important;
color:rgb(116, 73, 7);
padding-top:5px !important;

where custom_icons-font is the font name of the custom compile of icons I'm using and the "18" is the node number to use it with.  The content: "9" is the character mapping for a specific icon (in this case, an umbrella).

Link to comment

Thank you @Tracy Perry. That last box (css) might be the code I was struggling with. I tried to double up on the classes and it didn't work, because I wanted the option to use either fontawesome or my custom fonts.. Got to get back to my templates and try this.


Thank you very much ! That did the trick. I can now pick between fontawesome or my custom fonts on the forum rows.

Really appreciate your help.


Link to comment

Thank you very much ! That did the trick. I can now pick between fontawesome or my custom fonts on the forum rows.

Really appreciate your help.

Great.. I know it took me a while to figure it out.  My biggest issue is coming from XenForo where the CSS syntax is a little easier to follow and the templates are a easier for me to understand (the IPS templates look like a code monkey designed them).  Friendly they are not.  That extends to the CSS flow. I still am having issues with specificity in IPS.  You'd think that with the individual applications, there would be a tad more preciseness in it.

Link to comment


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...