Font Awesome, the iconic font designed for Bootstrap gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS. In a single collection, Font Awesome is a pictographic language of web-related actions and is completely free for commercial use.

Almost 3 years ago, i wrote a plugin for SMF where the user can add own icons next to the menu links Menu Icons 1.0 - page 1 - SMF 2.0.x Modifications - idesignSMF and before that a simple tutorial Add images to the menu - Tutorials - idesign360

This time instead of tiredly making or finding icons, we're going to use Font-Awesome icons for our menus. It works on all theme menus default and custom.

Demo: Look at our menu bar.

Screenshot:

Open /Themes/default/index.template.php and find:

Code Select Expand


// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '


Add fater:

Code Select Expand

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />

Open Sources/Subs.php and near the bottom of the file, find your menu links. We're going to use the "Help" tab for an example.

Code Select Expand


'help' => array(
'title' => $txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),


Select icons of your choice --> Font Awesome Icons

For example, i searched for a question mark and found "far fa-question-circle" and insert it in our "Help" tab.

Code Select Expand


'help' => array(
'title' => '<i class="far fa-question-circle"></i> ' .$txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),


This tutorial updated to Font-Awesome latest Version 5.2  :tongue: