Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
ClxCode

FontAwesome Forum Icons

Recommended Posts

FontAwesome Forum Icons

So this is to get the forum icons like we currently have. You need at least some css & html knowledge and be able to use google/firefox's developer tools.

Getting your Forum IDs

For this to work at all you need to know the forum ID's you want to change. You can find these by right clicking them and checking the data-forumid attribute:

Hidden Content

    Reply to this topic to see the hidden content.

You can also see the forum ID if you edit the forum in the admin cp, at the end of the url:

Hidden Content

    Reply to this topic to see the hidden content.

Adding some template code

Go to the theme and open up the following template: forums > front > index > forumRow

Hidden Content

    Reply to this topic to see the hidden content.

At the end of every instance of a span with the class ipsItemStatus:

<span class='ipsItemStatus

You will need to add this little bit of code before the closing ">".

data-forumID="{$forum->_id}"

On the default themes that's line 12, 16, 20 and 28. It will look something like this:

Hidden Content

    Reply to this topic to see the hidden content.

Adding the CSS

This is where you'll need your forum ID numbers. This is also how i implemented them into the WebFlake CSS. Open your custom.css and add the following code:

/* ==========================================================================
FORUM ICONS
========================================================================== */
/*== [Category Name] ==*/
span.ipsItemStatus.ipsItemStatus_large[data-forumid='1'] > i:before{ content: "\f015" }
span.ipsItemStatus.ipsItemStatus_large[data-forumid='2'] > i:before{ content: "\f059" }
span.ipsItemStatus.ipsItemStatus_large[data-forumid='3'] > i:before{ content: "\f188" }
span.ipsItemStatus.ipsItemStatus_large[data-forumid='4'] > i:before{ content: "\f0f4" }
span.ipsItemStatus.ipsItemStatus_large[data-forumid='5'] > i:before{ content: "\f135" }
span.ipsItemStatus.ipsItemStatus_large[data-forumid='6'] > i:before{ content: "\f007" }

Remember the forum IDs from earlier? You'll need to change the numbers here with your own forum IDs. You can copy/paste these lines for every forum you have, the reason i add the category names as comments is because in the future if stuff changes i won't lose track of which category is which.

Change the "\f015" part with whatever FontAwesome icon you want. Go to 

Hidden Content

    Reply to this topic to see the hidden content.
 and click the icon you want for your forum, for example "home". Copy the "unicode" part and replace it in your css. Keep the "\" backslash in there.

Hidden Content

    Reply to this topic to see the hidden content.

If you have forum icons set as images currently, you will need to remove them.

 

And that's it, you will now have customizable forum icons for your forums.

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.
Note: Your post will require moderator approval before it will be visible.

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.


×
×
  • Create New...