Adding an icon beside a menu item is a great way of giving your Joomla menu items some visual identification and can bring better clarity to your sites navigation. As well as improving your sites usability it is also a great way of adding some personality and styling to your site.

Recently we have started adding the excellent Font Awesome vector icon set (http://fortawesome.github.io/Font-Awesome/icons/) to our templates. These scalable icons can be added through out your site and in the following steps we are going to focus on how to add these icons to your menu items.

1. From your Joomla administration navigate to Menus -> [YourMenu]
2. Click in to the menu item to which you wish to add the icon
3. Select the 'Link Type' tab
4. In the 'Link CSS Style' field enter the Font Awesome icon class name you wish to use. For a full list of all the icons and their class names please refer to the following URL... http://fortawesome.github.io/Font-Awesome/icons/
5. Click 'Save and Close'

Please note that in some areas of the template icons have been disabled for example in the mobile version of the top menu area.