How to Add Icons to Joomla Menu Links

| Joomla
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:

[icon]{icon}[/icon]

  • 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:

[icon]fa-user[/icon] 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


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.