+- 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 based forum icons (ficons) in MyBB (/showthread.php?tid=27963)
Font Awesome based forum icons (ficons) in MyBB - AmazOuz - 09-27-2022
Font Awesome based icons are pretty popular these days and have replaced image based icons. In this tutorial, you will learn about adding Font Awesome based forum icons in MyBB without any plugins.
For this tutorial, make sure to have a complete backup before following this tutorial for any theme. Recently I shared a tutorial for GoDark MyBB theme and this tutorial will allow you to add ficons in any theme.
Note : This tutorial is intended for advanced MyBB administrators.
- First you need to install Font Awesome Icons on your forum. It uses the Font Awesome version 4.7.0, you can select Font Awesome 5 if you want.
- Go to Admin CP > Themes and Styles > Templates > Your theme Templates > Forum Bit Templates
- Edit forumbit_depth2_forum and forumbit_depth2_cat and find the below code
Code:
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>Replace the above code with this
Code:
<td class="{$bgcolor}" align="center" valign="center"><div class="forum_status forum_{$lightbulb['folder']} forum_{$forum['fid']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-envelope-open" aria-hidden="true"></i></div></td>- Now go to Admin CP> Forum and Posts > Forum Management and get the fid for the forum. In our case, fid is 4.
- Now go to css3.css and add this at the bottom of the CSS file. In the below code, 4 is the fid that we received from forum management.
- Add the below CSS in Global.css file
Code:
.forum_status {
height: 20px;
width: 20px;
font-size: 20px;
text-align: center;
padding: 5px;
}
.forum_status i {
display: inline-block;
}
.forum_offlock i:before {
content: "\f023";
}
.forum_offlink i:before {
content: "\f0c1";
}
.forum_4 i:before {
content: "\f187 ";
}- Repeat the step 2 and 3 for all the fid and you will have custom forum icons without any plugins.
- The above content f187 is unicode that you can get from icon page (https://fontawesome.com/v4.7.0/icon/archive). You can change the unicode for your preferred icon.
- Font Awesome icons – https://fontawesome.com/
Hope this helps you add Font Awesome based forum Icons on your MyBB Forums.
Source : WallBB (https://community.mybb.com/user-105159.html)