Jump to content
Sign in to follow this  
theboss

Add icon to left of forum category title using css

Recommended Posts

theboss    12

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

From this:

icons1.jpg.87e678257b9571c687dc61fba95eb

To this:

icons4.jpg.be75ba9d6f201104d98910837ed8c

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)

icons5.jpg.abd93efc2f92774df27c5f10a7b75

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

add:

[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  

×