Free Forever. Our themes will always be free. Forever. Period.

Font-Awesome and SMF

Mick in Tutorials
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:
Code: [Select]
	// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '

Add fater:
Code: [Select]
<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]
			'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]
			'help' => array(
'title' => '<i class="far fa-question-circle"></i> ' .$txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),

Tagged with:

Share This Post

Mick

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

Mick
Aug 09, 2018
This tutorial updated to Font-Awesome latest Version 5.2  :tongue:
1



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up