How to Add Icons to Joomla Menu Links

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^[1] to your menu items.

Step #1. Download and install NS Font Awesome

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

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^[2] and download it.
• Install it through Extensions > Manage.

Step #4. Create a macro with RokCandy

• Go to Components > RokCandy > Macros.

• In the Macro textarea type this:

[icon]{icon}[/icon]

• In the Html area type this:

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

• 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

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^[3].

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

Step #6. Check the end result

Visit your public site to preview the icon: