Make Forum Icons just like NBB

Ficons

(After following the first part of the tutorial) Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:


Code:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-comments"></i></div>

With:

Code:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read ficons_{$forum['fid']}" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-comments"></i></div>

Find the following in global.css:

Code:
.forum_status {
height: 50px;
width: 50px;
font-size: 30px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

After it, add this:

Code:
.ficons_2 i:before {
content: "\f000";
}

.ficons_3 i:before {
content: "\f1ba";
}

.ficons_4 i:before {
content: "\f0f5";
}

.ficons_6 i:before {
content: "\f0e4";
}

.ficons_7 i:before {
content: "\f03e";
}

The only parts of this you'll want to change are the numbers and the icons (There's some info at the end of this post about that). To find the number of a forum, when editing one in Forum Management, just look in the address bar for &fid=, whatever number follows that is the number to use in the CSS selector.




Finding New Icons
If you're using Google Chrome you can go here http://fortawesome.github.io/Font-Awesome/icons/ and right click > inspect element. Then expand the <i> tag and click the ::before element, which should show the icon in the right sidebar.