Jump to content
Sign in to follow this  

Add icon to left of forum category title using css

Recommended Posts

theboss    13

Here will show you how to add a FontAwesome icon to left of the forum category title

From this:


To this:


You will need to find the id number of the categories you want to have an icon for (I use FireBug for FF but there are alternatives for viewing the source code)


Now you will need to find the FontAwesome icon you want to use and make a note of the number(s) of the icons

Then AdminCP >> customizations >> themes >> far right of theme name click the Edit HTML/CSS button >> CSS tab >> custom.css


[data-categoryid] h2:before {
  font-family: FontAwesome;
  position: relative;
  top: 4px;
  left: -5px;
  font-size: 2em;

[data-categoryid="1"] h2:before {
  content: "\f19c";

[data-categoryid="5"] h2:before {
  content: "\f108";

.ipsType_sectionTitle {
  line-height: 2.5em;
  padding: 0 15px;

The first part of css is saying use FontAwesome, the position and font-size (you may need to change depending on your requirements)

The next 2 css are for the category id number(s) and you will need to change those for your categoery id's

The last part is for the height and padding of the title area, again you may need to change to meet your requirements

Once added then click the Save button and then refresh your forum browser and should see your icons displayed similar to my second screenie above

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this