Mybb Custom department icons as Font Awesome icons. MyBB guide.

[Haim]

Hello. In this tutorial I will describe how to add your own department icons using Font Awesome icons in MyBB.

STEP ONE - IMPLEMENTATION OF THE AWESOME FONT​

Go to PA --> Styles and Templates --> Templates --> Your Template --> Ungrouped Templates --> headerinclude .

Find a variable:

{$stylesheets}

Behind the variable, paste the code found on the Start | page Font Awesome
Example:

{$stylesheets}
 <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity = "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin = " anonymous" >

STEP TWO - EDIT TEMPLATES​

Go to PA --> Styles and Templates --> Templates --> Your Template --> Section Description --> forumbit_depth2_forum .

Swap with:

<span class = "forum_status forum_{$lightbulb['folder']} ajax_mark_read" title = "{$lightbulb['altonoff']}" id = "mark_read_{$forum['fid']}" ></span>

Change to:

<div class = "forum_status forum_{$lightbulb['folder']} ajax_mark_read faicons_{$forum['fid']}" title = "{ $ lightbulb ['altonoff']}" id = "mark_read_{$forum[' fid']}" ><i class = "fas fa-server" ></i></div>

Go to PA --> Styles and Templates --> Templates --> Your Template --> Section Description --> forumbit_depth2_cat .
Swap with:

<span class = "forum_status forum_{$lightbulb['folder']} ajax_mark_read" title = "{$lightbulb['altonoff']}" id = "mark_read_{$forum['fid']}" ></span>

Change to:

<div class = "forum_status forum_{$lightbulb['folder']} ajax_mark_read faicons_{$forum['fid']}" title = "{ $ lightbulb ['altonoff']}" id = "mark_read_{$forum[' fid']}" ><i class = "fas fa-server" ></i></div>

STEP THREE - EDIT THE STYLE SHEET​

Go to PA --> Styles and templates --> Styles --> your style --> global.css .
Swap with:

. 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 ; }

Change to:

. 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" ; }

STEP FOUR - CREATING A NEW STYLE SHEET​

Go to PA --> Styles and Templates --> Styles --> Your Style --> New CSS .

• File name (any): faicons.css .
• Attached to: Everyone.

Paste the CSS code below . Where X is the Department ID:

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

STEP FIVE - CHANGING SUB-DIVISION ICONS​

Go to PA --> Styles and templates --> Styles --> your style --> global.css .
Swap with:

. 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 ; }

Change to:

. 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" ; }

Go to PA --> Styles and Templates --> Templates --> Your Template --> Section Description --> forumbit_depth3_statusicon .
Swap with:

<div title = "{$lightbulb['altonoff']}" class = "subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id = "mark_read_{$forum['fid']}" ></div>

Change to:

<div title = "{$lightbulb['altonoff']}" class = "subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id = "mark_read_{$forum['fid']}" ><i class = "fas fa-server" ></i></div>

STEP SIX - READ FA ICON AND DEPARTMENT ID​

You can read the department ID by entering the department and reading the address bar of the page:

http://localhost/mybb-1.8/forumdisplay.php?fid=2

The digit after fid (at the very end) is the ID of the department.
You can read the FA icon on the red marked field:

THE FINAL RESULT​