D&D Forums - MyBB Plugins & Themes
Font-Awesome Forum Icons - Printable Version

+- D&D Forums - MyBB Plugins & Themes (https://developement.design/forum)
+-- Forum: MyBB General Discussions (https://developement.design/forum/forumdisplay.php?fid=23)
+--- Forum: Tricks & Tutorials (https://developement.design/forum/forumdisplay.php?fid=11)
+--- Thread: Font-Awesome Forum Icons (/showthread.php?tid=30)

Font-Awesome Forum Icons - AmazOuz - 01-03-2018

Hello folks Big Grin

Her's a new useful tutorial from MyBB community (https://community.mybb.com/thread-212919.html)
FOR EMERALD THEME : GO DIRECTLY TO THE STEP 5

1. Loading Font Awesome
In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template. Add the following after {$stylesheets}:
Code:
Code:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.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:
Code:
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>

With:
Code:
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:
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:
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:
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:
Code:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"></div>

Replace it with:
Code:
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:
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:
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:
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:
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:
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:
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";
}

Quote: Wrote:ficons_1,2,3 etc are your forums ID, if you don't know your forum ID just hover to one of the forums and underneath left hand corner of your screen you'll see something like forumdisplay.php?fid=9 or go inside your forum and on the search bar you will see fid ID.


All credits go to
Eric J.

Previews:
http://i.imgur.com/qhS0HWt.png
http://i.imgur.com/5gpXDz4.png
http://i.imgur.com/QoHmvQ0.png
http://i.imgur.com/INysr98.png