How to Add Font Awesome or Bootstrap Icons to Your Joomla Menu
- Written by Alex Smirnov Alex Smirnov
- Category: Joomla Tutorials Joomla Tutorials
- Published: 13 February 2018 13 February 2018
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
- Go to the DJ-MegaMenu Free download page.
- Scroll down and click on the green "Download DJ-MegaMenu Free edition" button:
- Go to Extensions > Manage and install the downloaded DJ-MegaMenu module:
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:
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:
- Find the Menu Icon setting.
- Type in your icon's name prefixed with
fa fa-. In my example, I entered
- 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.
Now check your site front end. You will see the home icon displayed by the Home menu item.