Adding a Font Awesome icon to a menu item

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

  • Saturday, 26 April 2014

Join Our Newsletter




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.