This tutorial will show you how to replace your forum icons with Font Awesome.
__________________________________________________________________________________________
Step 1
LOAD FONT AWESOME
In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template. Add the following after {$stylesheets}:
__________________________________________________________________________________________
Step 2
ADD YOUR ICON
Upload the image clear.png that is attached here to your /images/ folder.
![.png]()
clear.png (Size: 980 bytes / Downloads: 112)
Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:
with:
And finally add the following to your global.css file:
Now for those interested, I'll explain what I did.
First I changed the image (Generally on.png, off.png, offlock.png) to clear.png. That way we still get the click to mark as read functionality, without using images as the icons.
Then I used that as a class, so I got the classes forum_on, forum_off, forum_offlock. Then I positioned the image to completely cover the icon, and styled all the classes (Changing the FA icon for offlock and link forums).
This is the result:
![.png]()
forumicons.png (Size: 8.16 KB / Downloads: 55)
__________________________________________________________________________________________
Step 3
FIX YOUR LEGEND
If you wish to keep your forum icon legend (I generally remove it), find your Index Page Templates -> index template and replace the contents with this:
__________________________________________________________________________________________
__________________________________________________________________________________________
Step 4
ADD THE FICONS
Now, replace the code that was added to Forum Bit Templates -> forumbit_depth2_forum with:
And add this to your CSS:
Now is the part that can get a little tricky. So what I do is first I go here:
http://fortawesome.github.io/Font-Awesom...wesome.css
And copy the code for whatever icon I want to use. Then style the icon based on it's class (Which is decided by the forum number). Here's an example of what I used:
If you're having trouble figuring out what the class is for a certain forum, right click on the icon -> Inspect Element.
![.png]()
ficon.png (Size: 13.59 KB / Downloads: 48)
__________________________________________________________________________________________
Just let me know if there are any problems with it.![Smile]( "Smile")
Font-Awesome Status Icons
__________________________________________________________________________________________
Step 1
LOAD FONT AWESOME
In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template. Add the following after {$stylesheets}:
Code:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>__________________________________________________________________________________________
Step 2
ADD YOUR ICON
Upload the image clear.png that is attached here to your /images/ folder.
clear.png (Size: 980 bytes / Downloads: 112)
Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:
Code:
<img src="{$theme['imgdir']}/{$lightbulb['folder']}.png" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" />with:
Code:
<div class="forum_icon forum_{$lightbulb['folder']}"><i class="fa fa-comments"></i><img src="images/clear.png" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></div>And finally add the following to your global.css file:
Code:
.forum_icon { position: relative; height: 50px; width: 50px; text-align: center; font-size: 30px; display: inline-block; }
.forum_icon i { display: inline-block; line-height: 50px; }
.forum_icon img { position: absolute; top: 0; left: 0; }
.forum_on { color: #0094d1; }
.forum_off, .forum_offlink, .forum_offlock { color: #333; }
.forum_off { opacity: .4; }
.forum_offlock i:before { content: "\f023"; }
.forum_offlink i:before { content: "\f0c1"; }Now for those interested, I'll explain what I did.
First I changed the image (Generally on.png, off.png, offlock.png) to clear.png. That way we still get the click to mark as read functionality, without using images as the icons.
Then I used that as a class, so I got the classes forum_on, forum_off, forum_offlock. Then I positioned the image to completely cover the icon, and styled all the classes (Changing the FA icon for offlock and link forums).
This is the result:
forumicons.png (Size: 8.16 KB / Downloads: 55)
__________________________________________________________________________________________
Step 3
FIX YOUR LEGEND
If you wish to keep your forum icon legend (I generally remove it), find your Index Page Templates -> index template and replace the contents with this:
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
{$forums}
{$boardstats}
<dl class="forum_legend smalltext">
<dt><div class="forum_icon forum_on"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->new_posts}</dd>
<dt><div class="forum_icon forum_off"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->no_new_posts}</dd>
<dt><div class="forum_icon forum_offlock"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_locked}</dd>
<dt><div class="forum_icon forum_offlink"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}
</body>
</html>__________________________________________________________________________________________
Font-Awesome Ficons
__________________________________________________________________________________________
Step 4
ADD THE FICONS
Now, replace the code that was added to Forum Bit Templates -> forumbit_depth2_forum with:
Code:
<div class="ficons_container"><div class="ficon ficon_{$forum['fid']}"><i class="fa fa-folder"></i></div><div class="forum_icon forum_{$lightbulb['folder']}"><i class="fa fa-comments"></i><img src="images/clear.png" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></div></div>And add this to your CSS:
Code:
.ficons_container { width: 100px; }
.ficon { display: inline-block; float: right; width: 50px; height: 50px; font-size: 30px; }
.ficon i { display: inline-block; line-height: 50px; }Now is the part that can get a little tricky. So what I do is first I go here:
http://fortawesome.github.io/Font-Awesom...wesome.css
And copy the code for whatever icon I want to use. Then style the icon based on it's class (Which is decided by the forum number). Here's an example of what I used:
Code:
.ficon_2 i:before { content: "\f0e7"; color: #fddc00; }
.ficon_3 i:before { content: "\f06c"; color: #61ad10; }
.ficon_4 i:before { content: "\f06d"; color: #e44b00; }
.ficon_5 i:before { content: "\f11b"; color: #9a3ec0; }If you're having trouble figuring out what the class is for a certain forum, right click on the icon -> Inspect Element.
ficon.png (Size: 13.59 KB / Downloads: 48)
__________________________________________________________________________________________
Just let me know if there are any problems with it.
