Font-Awesome Forum Icons on MyBB 1.8 Software
Today, I will be giving you a tutorial on how to replace forum icons with Font-Awesome icons. The software of board being used in this tutorial is MyBB 1.8, however, any versions from 1.4 to 1.8 would be fine. Most of you have seen these type of additions on bulletin board's across the globe, and very much sure some of you would like to have one of these pages of your own. All others are also welcome to help other individuals on this thread who may be having issues, problems, and, errors after or before reading this tutorial. Many threads will be created regarding MyBB for owners and theme developers. 1. Loading 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.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>2. Adding Your Icon
Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:
Code:
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>With:
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>Now find the following in your global.css:
Code:
.forum_status {
height: 30px;
width: 30px;
background: url(images/forum_icon_sprite.png) no-repeat 0 0;
}
.forum_on {
background-position: 0 0;
}
.forum_off {
background-position: 0 -30px;
}
.forum_offlock {
background-position: 0 -60px;
}
.forum_offlink {
background-position: 0 -90px;
}Replace it with:
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";
}3. Fix Your Legend
If you wish to keep your forum icon legend, 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_status forum_on"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->new_posts}</dd>
<dt><div class="forum_status forum_off"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->no_new_posts}</dd>
<dt><div class="forum_status forum_offlock"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_locked}</dd>
<dt><div class="forum_status forum_offlink"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}
</body>
</html>4. Adding Font-Awesome Subforum Icons
Find this in Forum Bit Templates -> forumbit_depth3_statusicon:
Code:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"></div>Replace it with:
Code:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"><i class="fa fa-comment"></i></div>Then in global.css find this:
Code:
.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
background: url(images/mini_status_sprite.png) no-repeat 0 0;
}
.subforum_minion {
background-position: 0 0;
}
.subforum_minioff {
background-position: 0 -10px;
}
.subforum_miniofflock {
background-position: 0 -20px;
}
.subforum_miniofflink {
background-position: 0 -30px;
}Replace it with:
Code:
.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
}
.subforum_minion {
color: #333;
}
.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink {
color: #333;
}
.subforum_minioff {
opacity: .4;
}
.subforum_miniofflock i:before {
content: "\f023";
}
.subforum_miniofflink i:before {
content: "\f0c1";
}5. Adding Font-Awesome Forum Icons
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";
}
