Adding an icon next to your module titles is an ideal way to bring some clarity to the purpose of a module. The visual guide will add definition and gives more of an impact to visitors to your site as well bringing some extra style to the overall look and feel.

Recently we have started adding the excellent Font Awesome vector icon set (http://fortawesome.github.io/Font-Awesome/) to our templates. FOnt Awesome offers you a hugh selection of scalable icons which can be added through out your site and in the following steps we are going to focus on how to add these icons next to the titles of your modules.

1. From your Joomla administration navigate to Extensions -> Module Manager.
2. Select the module to which you wish to add the icon.
3. Select the 'Advanced' tab
4. In the 'Header Class' 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'

Your template will have a default color set for your module title icon however if you wish to change this default color you can add the following to the Custom CSS field of your templates parameters..

.module_header [class^="fa-"]:before, 
.module_header [class*=" fa-"]:before {
    color: #000000 !important;
}

Where #000000 is your new module title icon color (edit to your own taste).