MyBB - Changing forum icons to FontAwesome

[Donna_Kx]

MyBB is a good forum but gee, it sure does have a ton of icons. We removed some and changed others to FontAwesome as we weren’t fond of the ancient look of the default icons. Here’s a basic guide to how we did it. If you want to replace yours, you can follow this guide for a starter. Once you get the gist of it, it’s not hard to do. We will preface the tutorial with some important tips. 

Thanks to Livewire at MyBB community for the initial guide. I’ve updated my guide with the latest FA icons.

TIPS:

• Always work on a clone theme and template. I never, ever edit default files. 
  
• Make copies of any files you are changing. I have folders on my computer for “original files” and “changed files.”  I use Sublime Text and copy all the code from one file, such as “global.css” and paste that, then save it as the same name but in the “original files” folder. I then save the changed file into the “changed files” folder. Makes it much easier when upgrading to update these files manually.
  
• If using Sublime Text editor, NotePad++ or some other editor, you’ll have code lines. That’ll make it easier to follow along as I’ll put line numbers where possible.
  
• Make a local development site to work on first. Or, if you can’t do that, make a development site on your server. Work on your development site before posting any changes to your main site. In order to keep from accidentally changing your main site, make your favicon on your dev site a different look. Also, you can name your dev site with “Dev” in the title. This way it can help you distinguish between main and dev.
  
• Backup your main site before applying changes. 
  
• Clear all cache after applying changes.
  

TThe tutorial below shows the FontAwesome icons we are using here. You can check the various icons here, https://fontawesome.com/icons . If you want to use other FontAwesome icons, here’s how:

We’ll take one of the forum icons as an example. Below we have this in "global.css":

Code:

.ficons_2 i:before {
content: "\f70e";
}

The FontAwesome icon code is “\f70e” which you get when you click to view a FontAwesome icon and in the top right it will have the code to use.
   
You’ll need to be logged into the admin panel for these changes.

1. Navigate to Templates click “Options > Expand Templates” for your template you’ve made.
      
   
2. Find Ungrouped Templates at the bottom and click “Expand.”
      
   
3. Look for “headerinclude” and click “Options > Full Edit.” (note that I save this one before editing as mentioned above.)
      
   
4. Add the FontAwesome code:
   
   Code:

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   
   and save.
      
   

Now that you’ve added the FontAwesome code, you can replace your icons.

1. Still in Templates, find “Forum Bit Templates” and click to open it to view all the templates.
   
     fa5.png (Size: 77.77 KB / Downloads: 20)
   
2. You’ll need to add the FA (FontAwesome) code in two templates, “forumbit_depth2_forum” and “forumbit_depth2_cat” - don’t forget to first make a copy.
   
     fa6.png (Size: 67.47 KB / Downloads: 18)
   
3. Find the following code which should be on line 2:
   
   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>
   
   
4. Replace it with:
   
   Code:

   <td class="{$bgcolor}" align="center" width="1"><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></td>
   
   
5. Now you need to add the CSS. Navigate to Themes and click the name of the theme you made. This will open the stylesheet list.
   
     fa7.png (Size: 54.76 KB / Downloads: 18)
   
6. Click the “global.css” stylesheet to open it and select the Advanced mode tab.
   
7. In your text editor, copy and paste global.css and find, around lines 302-333:
   
   Code:

   .forum_status {
    height: 30px;
    width: 30px;
    background: url(images/forum_icon_sprite.png) no-repeat 0 0;
    display: inline-block;
}

.forum_on {
    background-position: 0 0;
}

.forum_off {
    background-position: 0 -30px;
}

.forum_offclose {
    background-position: 0 -60px;
}

.forum_offlink {
    background-position: 0 -90px;
}
   
   
8. Replace that code with the following:
   
   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: #4285f4;
}

.forum_off, .forum_offlink {
color: #333;
}

.forum_offlock {
    color: #CE2020;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

.ficons_2 i:before {
content: "\f70e";
}

.ficons_3 i:before {
content: "\f1ba";
}

.ficons_4 i:before {
content: "\f187";
}

.ficons_5 i:before {
content: "\f059";
}

.ficons_6 i:before {
content: "\f0e4";
}

.ficons_10 i:before {
content: "\f688";
}

.ficons_11 i:before {
content: "\f509";
}

.ficons_12 i:before {
content: "\e573";
}

.ficons_13 i:before {
content: "\f02d";
}

.ficons_14 i:before {
content: "\f02d";
}

.ficons_15 i:before {
content: "\f0c0";
}

.ficons_16 i:before {
content: "\f07a";
}

.ficons_17 i:before {
content: "\f544";
}

.ficons_18 i:before {
content: "\f0ac";
}

.ficons_19 i:before {
content: "\f233";
}

.ficons_20 i:before {
content: "\f0e0";
}

.ficons_21 i:before {
content: "\f4ad";
}

.ficons_22 i:before {
content: "\f53f";
}

.ficons_23 i:before {
content: "\f121";
}
   
   For the above, you’ll want to change the “.ficons_(number)” to match your own forum IDs. You may find you have less forum IDs than we do here. Just remove those you don’t need. If you have more, add those. To find the forum ID, hover over one of your forum categories and you’ll see the ID in the lower left where the URL shows. The screenshot below shows that the forum category we are looking at is ID 18.
   
   
     fa9.png (Size: 50.7 KB / Downloads: 18)
   
   If you look above at the css I’ve posted, you’ll see “.ficons_18” which goes with that forum.
   

Subforum Icons

1. Still in the Forum Bit Templates, open “forumbit_depth3_statusicon”:
   
     fa11.png (Size: 78.44 KB / Downloads: 18)
   
2. Replace the code in that template with the following:
   
   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>
   
   
3. Open global.css again and find lines 325-347:
   
   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_minioffclose {
    background-position: 0 -20px;
}

.subforum_miniofflink {
    background-position: 0 -30px;
}
   
   
4. Replace that code 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";
}

Fixing the Legend

1. For the legend, in the Templates, navigate to Index Page Templates and click it to open the templates and click the index template to edit it.
   
2. Find the following code from lines 17-29:
   
   Code:

   <dl class="forum_legend smalltext">
    <dt><span class="forum_status forum_on" title="{$lang->new_posts}"></span></dt>
    <dd>{$lang->new_posts}</dd>

    <dt><span class="forum_status forum_off" title="{$lang->no_new_posts}"></span></dt>
    <dd>{$lang->no_new_posts}</dd>

    <dt><span class="forum_status forum_offclose" title="{$lang->forum_closed}"></span></dt>
    <dd>{$lang->forum_closed}</dd>

    <dt><span class="forum_status forum_offlink" title="{$lang->forum_redirect}"></span></dt>
    <dd>{$lang->forum_redirect}</dd>
</dl>
   
   
3. Replace it with the following:
   
   Code:

   <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_closed}</dd>

<dt><div class="forum_status forum_offlink"><i class="fa fa-comments"></i></div></dt>
<dd>{$lang->forum_redirect}</dd>
</dl>

That’s it for this tutorial. Hope it helps get you started in improving your own MyBB forum.