+- WallBB Forums (https://wallbb.co.uk/forums)
+-- Forum: Theme Section (https://wallbb.co.uk/forums/forumdisplay.php?fid=5)
+--- Forum: Theme Documentation (https://wallbb.co.uk/forums/forumdisplay.php?fid=9)
+--- Thread: Go Dark Theme - Adding Font Awesome ficons without any plugin (/showthread.php?tid=325)
Adding Font Awesome ficons without any plugin - WallBB - 03-05-2020
Hello,
This tutorial teaches you how to add Font Awesome 4.7.0 icons as ficons without any plugins.
NOTE: Keep a backup of your templates and CSS before making any changes.
1. First of all, replace the code in forumbit_depth2_forum and forumbit_depth2_cat with this code.
Code:
<tr>
<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>
<td class="{$bgcolor}" valign="center">
<span class="big_title"><a href="{$forum_url}">{$forum['name']}</a></span>{$forum_viewers_text}<div class="smalltext">{$forum['description']}</div>
{$subforums}
</td>
<td class="{$bgcolor}" valign="center" align="center" style="white-space: nowrap"> {$threads}{$unapproved['unapproved_threads']} <br/> <span class="smalltext">Threads</span> </td>
<td class="{$bgcolor}" valign="center" align="center" style="white-space: nowrap"> {$posts}{$unapproved['unapproved_posts']} <br/> <span class="smalltext">Posts</span> </td>
<td class="{$bgcolor}" valign="center" align="left" style="white-space: nowrap">{$lastpost}</td>
</tr>2. Now go to Admin CP> Forum and Posts > Forum Management and get the fid for the forum. In our case, fid is 4.
3. Now go to css3.css and add this at the bottom of the css file. In below code, 4 is the fid that we received from forum management.
Code:
.forum_4 i:before {
content: "\f187 ";
}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 4.7.0 icons - https://fontawesome.com/v4.7.0/icons/
4. Repeat the step 2 and 3 for all the fid and you will have custom forum icons without any plugins.
Regards
WallBB