Adding a Font Awesome icon to a module title

This tutorial applies to the following templates:

  • Colette
  • Maya
  • Grace
  • Magnolia
  • Harmony
  • Verona
  • Kodaline
  • London
  • Hannah
  • Elvira
  • Valencia
  • Serenity
  • Chelsea
  • Scarlett
  • Trinity
  • Willow
  • Caitlin
  • Nadia
  • Beaumont
  • Ashley
  • Fedora
  • Artisan
  • Creative
  • Revolve
  • Madison
  • Florence
  • Vitality
  • Enterprise
  • Boutique
  • Stockholm
  • Alexis
  • Central
  • Boss
  • Journal
  • Enlighten
  • LifeStyle
  • Habitat
  • Grafik
  • Brooklyn
  • Cashmere
  • Virtuoso

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 ( 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...
  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).

  • Saturday, 26 April 2014

Join Our Newsletter

Free Classic Template

Sign up to our Newsletter and receive news on template releases and discount coupons along with free access to our 'Classic' Joomla template.

Joomla51 - Mullaghmore, Co. Sligo, Ireland is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.