Font Awesome icons without extra plugins

In this little tutorial, I will show you in step 1>> how to decorate the entries in the navigation bar with Font Awesome icons and in step 2 >> how to exchange the status icons of the individual forums. It’s actually very simple, Invision Community supports FA out of the box and a list of the icons that are currently supported can be found HERE .

If you have found something that you want to use, click on it and make a note of the Unicode in the detailed view …

Next, go to the list of installed themes in the AdminCP and click on the </> symbol for the theme in which you want to use the icons.

Then click on the CSS tab and look for the template custom.css , in which you should usually only see a placeholder for an unedited theme.

In order to use FA in navigation, it must first be triggered for this position. This code snippet is responsible for this, which you copy into the empty template …

.ipsNavBar_primary li> a: before {
  font-family: "FontAwesome";
  line-height: 1;
  font-weight: normal;
}

OK, now we know where to get the icons from and where to insert them. Now we just have to tell the theme where it should display which icon.

To do this, go back to the front end, right-click on the element to which you want to assign an icon and select the item Investigate in the context menu , whereupon your browser will present you with something of this kind …

What interests us in this case is the ID 21 . Now copy the following into your template, save it and update your page …

.ipsNavBar_primary li [id = "elNavSecondary_21"]> a: before {content: "\ f198"} / * Slack * /

Now the element with the ID 21 should associate the FA-Icon with the Unicode f198, in this case “Slack”. Do the same for all other elements in the top navigation bar. It’s the same with subnavigation, only the code is a little bit different …

.ipsNavBar_secondary li [id = "elNavSecondary_10"]> a: before {content: "\ f086"} / * Comments * /

Now we come to step 2 , in which we dedicate ourselves to the status icons of the forums. You can find out their IDs with a right click, as well as those of the elements in the navigation. The code to exchange a forum icon is just a bit longer and looks like this …

.ipsDataItem [data-forumid = '2'] .ipsItemStatus.ipsItemStatus_large .fa-comments :: before,
.ipsItemStatus: not (.ipsItemStatus_large) .fa-comments :: before {
    content: "\ f198";
}

The forum with the ID number 2 is assigned the icon with the Unicode f198, that’s actually it. When you’re done, it could look something like this …