The Joomlashack Blog

How to Add Font Awesome or Bootstrap Icons to Your Joomla Menu

Written by Steve Burge Steve Burge
Published: 14 February 2018 14 February 2018
Adding Font Awesome or Bootstrap Icons to Your Joomla Menu

Icons can make your Joomla site look much more professional and appealing. You have now tons of cool icons in Font Awesome and Bootstrap libraries to choose from. 

Your site main menu is one of the first places your visitors will pay their attention to. In this tutorial, you will learn how to add a Font Awesome or Bootstrap icon to your Joomla main menu. Even if you don't know any code.

DJ-MegaMenu Joomla menu module makes this magic happen. Just install this extension. Then find the name of a Font Awesome or Bootstrap icon you would like to add. And finally, copy the icons CSS prefix and name into your Joomla menu item.

Let's get started.

Step #1. Install DJ-MegaMenu Module

01 download dj megamenu free

  • Go to Extensions > Manage and install the downloaded DJ-MegaMenu module:

02 extensions manage

Excellent! You installed your DJ-MegaMenu module. In a few minutes, you will enable it to use it as your main menu. But first, you need to select a Font Awesome or Bootstrap icon to add to your main menu.

Step #2. Select a Font Awesome or Bootstrap Icon

  • To select a Font Awesome icon name, go to Font Awesome Free's Cheatsheet. 
  • Find an icon of your choice.
  • Copy the icon's name to use it in the next step. For the purpose of this tutorial, I picked up the home icon:

03 font awesome home icon

To find a Bootstrap icon name, visit Bootstrap icon glyphs.

Step #3. Add the Icon Prefix and Name to Your Joomla Menu Item

For the final step, you just need to copy the icon's fa fa- prefix and name into your Joomla menu item.

  • Go to Menus > <YOUR-MENU> > <YOUR-MENU-ITEM>. For the purpose of this tutorial, I selected the Main Menu and its Home menu item.
  • Click on the DJ-MegaMenu Options tab:

04 home menu item dj megamenu options tab

  • Find the Menu Icon setting.
  • Type in your icon's name prefixed with fa fa-. In my example, I entered fa fa-home:

05 home icon name copied

  • Click Save & Close.

Your Home menu item now has the home icon. Just one step to go.

Step #4. Enable Your DJ-MegaMenu Module

  • Go to Extensions > Modules.
  • Disable the Main Menu and enable the DJ-MegaMenu.

06 main menu disabled

Now check your site front end. You will see the home icon displayed by the Home menu item.

07 home icon displayed

Additional Reading

The Beginners Guide to Font Awesome