How to Add Icons to Joomla Menu Items

Many Joomla templates come with icon support for menu items.

However, if your template doesn't support menu icons, we have a solution for you.

Continue reading this post to know how to add Font Awesome icons to your menu items.

Step #1. Download and install NS Font Awesome

Icons to Joomla Menu Items

  • Login to your Joomla administrator area.
  • Go to Extensions > Manage
  • Click "Upload a Package File" and upload the zip you just downloaded.

Step #2. Enable the NS Font Awesome plugin

  • Go to Extensions > Plugins
  • Look for the "System - NS Font Awesome" and enable it.

Icons to Joomla Menu Items

This plugin will load the necessary files to make Font Awesome icons work on your site.

Step #3. Download and Install RokCandy

To add icons, the <i> tag is required, however Joomla doesn't allow to add it directly into the menu item title. We need RokCandy to "trick" Joomla.

  • Go to the RokCandy page and download it.
  • Install it through Extensions > Manage.

Icons to Joomla Menu Items

Step #4. Create a macro with RokCandy

  • Go to Components > RokCandy > Macros.

Icons to Joomla Menu Items

  • Click the "New" button.

Icons to Joomla Menu Items

  • In the Macro textarea type this:

  • In the Html area type this:

<i class="fa {icon}"></i>

Icons to Joomla Menu Items

  • Click "Save and close" when you're done.

Step #5. Use the macro in a menu item

  • Go to Menus > Your menu > Your menu item.

In my example, I'm adding the user icon next to "About" text with this snippet:

 About

Icons to Joomla Menu Items

In the example above, fa-user is the class to render the user icon. To know which class icons are available, take a look at the list from the Font Awesome developer's site.

  • Go to Page Display tab
  • Set a Browser page title. Type the menu item title but without the macro.

Icons to Joomla Menu Items

  • Click "Save and close".

Step #6. Check the end result

Visit your public site to preview the icon:

Icons to Joomla Menu Items