1. Loading Font Awesome 5
In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template.
Add the following after:
External linking:
* Or you can also just download Fontawesome5 pkg and strip it down for size to be used for for internal theme include:
ie: download web-specific files source: https://use.fontawesome.com/releases/v5.....2-web.zip
And change headerinclude linkage to reflect where you uploaded your internal library
Internal linking example:
2. Adding Your Icon
Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:
With:
Now find the following in your global.css:
Replace it with:
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:
In global.css find:
Replace with:
4. Adding Font-Awesome Subforum Icons
Find this in Forum Bit Templates -> forumbit_depth3_statusicon:
Replace it with:
Then in global.css find this:
Replace it with:
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:
With:
Find the following in global.css:
After it, add this:
Now if you also want ficons for subforum icons
Begin by replacing forumbit_depth3_statusicon with:
Find in global.css:
Add after:
Best of Luck!
~ V![Wink]( "Wink")
Final note on this particular implementation specific only to forum icons, if this tutorial is too complicated and you would rather simply use a plugin for the same type of implementation with much less manual edits, you could use the following plugin: https://github.com/vintagedaddyo/MyBB_Pl...meIconsFA5
In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template.
Add the following after:
{$stylesheets}
External linking:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
* Or you can also just download Fontawesome5 pkg and strip it down for size to be used for for internal theme include:
ie: download web-specific files source: https://use.fontawesome.com/releases/v5.....2-web.zip
And change headerinclude linkage to reflect where you uploaded your internal library
Internal linking example:
<link rel="stylesheet" href="{$mybb->asset_url}/fontawesome5/css/all.css">
2. Adding Your Icon
Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>
With:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fas fa-comments"></i></div>
Now find the following in your global.css:
.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_offclose {
background-position: 0 -60px;
}
.forum_offlink {
background-position: 0 -90px;
}
Replace it with:
/** Forums FA5 by: V **/
.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_offclose, .forum_offlink {
color: #333;
opacity: 0.5;
}
.forum_off i {
opacity: .4;
}
.forum_offclose 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:
<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="fas fa-comments"></i></div></dt>
<dd>{$lang->new_posts}</dd>
<dt><div class="forum_status forum_off"><i class="fas fa-comments"></i></div></dt>
<dd>{$lang->no_new_posts}</dd>
<dt><div class="forum_status forum_offclose"><i class="fas fa-comments"></i></div></dt>
<dd>{$lang->forum_closed}</dd>
<dt><div class="forum_status forum_offlink"><i class="fas fa-comments"></i></div></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>
<br class="clear" />
{$footer}
</body>
</html>
In global.css find:
.forum_legend,
.forum_legend dt,
.forum_legend dd {
margin: 0;
padding: 0;
}
.forum_legend dd {
float: left;
margin-right: 10px;
margin-top: 7px;
}
.forum_legend dt {
margin-right: 10px;
float: left;
}
Replace with:
.forum_legend, .forum_legend dt, .forum_legend dd {
margin: 0;
padding: 0;
}
.forum_legend dd {
float: left;
margin-right: 10px;
margin-top: 17px;
}
.forum_legend dt {
float: left;
margin-right: 5px;
}
4. Adding Font-Awesome Subforum Icons
Find this in Forum Bit Templates -> forumbit_depth3_statusicon:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"></div>
Replace it with:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"><i class="fas fa-comment"></i></div>
Then in global.css find this:
.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_minioffclose {
background-position: 0 -20px;
}
.subforum_miniofflink {
background-position: 0 -30px;
}
Replace it with:
/** Subforums FA5 by: V **/
.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
}
.subforum_minion {
color: #0094D1;
}
.subforum_minioff, .subforum_minioffclose, .subforum_miniofflink {
color: #333;
opacity: 0.5;
}
.subforum_minioff {
opacity: .4;
}
.subforum_minioffclose 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:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fas fa-comments"></i></div>
With:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read ficons_{$forum['fid']}" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fas fa-comments"></i></div>
Find the following in global.css:
/** Forums FA5 by: V **/
.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_offclose, .forum_offlink {
color: #333;
}
.forum_off i {
opacity: .4;
}
.forum_offclose i:before {
content: "\f023";
}
.forum_offlink i:before {
content: "\f0c1";
}
After it, add this:
/** Ficons FA5 by: V **/
.ficons_2 i:before {
content: "\f000";
}
.ficons_3 i:before {
content: "\f1ba";
}
.ficons_4 i:before {
content: "\f2e7";
}
.ficons_5 i:before {
content: "\f3fd";
}
.ficons_6 i:before {
content: "\f03e";
}
.ficons_7 i:before {
content: "\f000";
}
.ficons_8 i:before {
content: "\f1ba";
}
.ficons_9 i:before {
content: "\f2e7";
}
.ficons_10 i:before {
content: "\f3fd";
}
.ficons_11 i:before {
content: "\f03e";
}
.ficons_12 i:before {
content: "\f000";
}
.ficons_13 i:before {
content: "\f1ba";
}
.ficons_14 i:before {
content: "\f2e7";
}
.ficons_15 i:before {
content: "\f3fd";
}
.ficons_16 i:before {
content: "\f03e";
}
Quote: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.
Now if you also want ficons for subforum icons
Begin by replacing forumbit_depth3_statusicon with:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read sficons_{$forum['fid']}" id="mark_read_{$forum['fid']}"><i class="fas fa-comment"></i></div>
Find in global.css:
/** Subforums FA5 by: V **/
.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
}
.subforum_minion {
color: #0094D1;
}
.subforum_minioff, .subforum_minioffclose, .subforum_miniofflink {
color: #333;
opacity: 0.5;
}
.subforum_minioff {
opacity: .4;
}
.subforum_minioffclose i:before {
content: "\f023";
}
.subforum_miniofflink i:before {
content: "\f0c1";
}
Add after:
/** sFicons FA5 by: V **/
.sficons_2 i:before {
content: "\f000";
}
.sficons_3 i:before {
content: "\f1ba";
}
.sficons_4 i:before {
content: "\f2e7";
}
.sficons_5 i:before {
content: "\f3fd";
}
.sficons_6 i:before {
content: "\f03e";
}
.sficons_7 i:before {
content: "\f000";
}
.sficons_8 i:before {
content: "\f1ba";
}
.sficons_9 i:before {
content: "\f2e7";
}
.sficons_10 i:before {
content: "\f3fd";
}
.sficons_11 i:before {
content: "\f03e";
}
.sficons_12 i:before {
content: "\f000";
}
.sficons_13 i:before {
content: "\f1ba";
}
.sficons_14 i:before {
content: "\f2e7";
}
.sficons_15 i:before {
content: "\f3fd";
}
.sficons_16 i:before {
content: "\f03e";
}
Best of Luck!
~ V
Final note on this particular implementation specific only to forum icons, if this tutorial is too complicated and you would rather simply use a plugin for the same type of implementation with much less manual edits, you could use the following plugin: https://github.com/vintagedaddyo/MyBB_Pl...meIconsFA5