FontAwesome Forum Icons

[Phun]

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:

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

 

Adding some template code

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

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:

 

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 http://fontawesome.io/icons/ 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.

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.

[Always on keyboard]

Thank you @Phun you awesome

[markisac]

I am using TypIcons

they are best for icons styles and some i am taking from AskFont

thanks

[krazeyfire]

thanks for the awesome tutorial

[Little Monsters]

Thanks a lot for this. Makes any forum look loads better.

[theezy]

@Phun thanks for this awesome tutorial.

Just one question how can we add color when specific section shows unread.

[Ketchup]

I don't use IPB but this is just a guess, by viewing source for css.

Try:

span.ipsItemStatus.ipsItemStatus_large { color: #009900; } /* UNREAD */
span.ipsItemStatus.ipsItemStatus_large.ipsItemStatus_read { color:#FF0000; } /* READ */

It may work.

Edited February 16, 2017 by Ketchup

[AlFcl]

and this  work from category?

 

[Siirene]

Thanks you @Phun its very beautiful *_*

Edited August 23, 2017 by Siirene
Problem solved

[Isabel]

Does it work on 4.2?

[mr-pimpen]

there is an easier way to do this with out all that like if you go to breadcrums and look for this

<i class='fa fa-home'></i>

all you have to do is replace that with your own you do this for each one you want

this is a test of what it will look like

<span><i class="fa fa-car fa-lg" style="font-size: 1.33333333em;line-height: 0.1em;vertical-align: -15%;color: red;"></i>

 

[Isabel]

@mr-pimpen

Forgive me but also translate from English into my language, I can not understand the procedure you describe ... and whether it works for 4.2 or just 4.1 

[mr-pimpen]

2 hours ago, Isabel said:

@mr-pimpen

Forgive me but also translate from English into my language, I can not understand the procedure you describe ... and whether it works for 4.2 or just 4.1 

i only speak english  sorry and yes it works on all ips

[Isabel]

You do not have to apologize for your language (my fault I do not know English).
I would like to understand how to insert the icons that you describe above ...

10 hours ago, mr-pimpen said:

there is an easier way to do this with out all that like if you go to breadcrums

what is "breadcrums"? 

[mr-pimpen]

8 hours ago, Isabel said:

You do not have to apologize for your language (my fault I do not know English).
I would like to understand how to insert the icons that you describe above ...

what is "breadcrums"? 

admin cp

theme breadcrum