Font-Awesome and SMF

Written by Mick in Tutorials on 02 Sep 2013


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:

// 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(
),
),


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.


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

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
1 Comments


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

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.