Contribute to the development of SMF. Follow the coding discussions taking place on >> Github.

Font-Awesome and SMF

Mick in Tutorials on Sep 02, 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(
),
),

Tagged with:


Mick

Mick G

idesignsmf.com

    

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 and has a weakness for Tacos and Pizza.


1 Comments

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




Latest Discussions

Join the conversation

Our Most Popular Features