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

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com 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.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok