Make Forum Icons just like NBB

19-02-2016, 11:53 AM

Quanity Wrote:

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.

Or just goto - http://community.mybb.com/thread-156711.html and see the ficons part

19-02-2016, 01:24 PM

Stoic Wrote: A little more explanation on what/how it isn't working would be a good start. What steps have you done and have you made sure you have followed the instructions?

26-02-2016, 02:29 AM

JohnDaveB. Wrote: Just wanted to re-up this post tho. Because I'm having problems to my forum. I have followed the instructions given but it gave me an output of this. :( hope someone will help me with it. :(

http://i.imgur.com/y35i8Ke.png

26-02-2016, 02:50 AM

Aoki Wrote:

26-02-2016, 02:29 AM

JohnDaveB. Wrote: Just wanted to re-up this post tho. Because I'm having problems to my forum. I have followed the instructions given but it gave me an output of this. :( hope someone will help me with it. :(

http://i.imgur.com/y35i8Ke.png

Remove the old forum status css code from your global.css file. You didn't follow the instructions of the tutorial correctly.

26-02-2016, 02:59 AM

John Dave B. Wrote: Oh wait! :v It's working fine now :v Maybe it is because of the browser cache :o I dunno wth is going on with it tho.