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 - idesign360 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.
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 href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
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(
),
),
Go to the icons library and choose an icon of your choice
Font Awesome Icons click and select.
For example, i picked the "icon-lightbulb" and let's insert it in ouw "Help" tab.
'help' => array(
'title' => '<i class="icon-lightbulb"></i> ' .$txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),