Jump to content
TheHost4U - Webmaster Resources
Sign in to follow this  
theboss

Add icon to left of forum category title using css

Recommended Posts

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...