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 - idesign360This 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:
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
Add fater:
<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.
'help' => array(
'title' => $txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),
For example, i searched for a question mark and found "far fa-question-circle" and insert it in our "Help" tab.
'help' => array(
'title' => '<i class="far fa-question-circle"></i> ' .$txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),