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

Who's Online

We have 325 guests and one member online

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