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.

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