Adding icons to your menus allows you to quickly catch the eye of your visitors and let them know what they are likely to find on your different pages.
There are different ways to add them to each of your menu links and we'll see them together.
However, if you don't want to touch the code, I present you a free plugin at the end of this article to add some easily.
Adding icons to the Divi menu without a plugin
First of all, you should know that you can use different icon sources:
- Elegant Theme icons directly integrated into Divi
- the free FontAwesome library
- Sites specializing in all kinds of icons such as Noun Project, which are usually paid for.
- images of your choice
We'll start with...
Give a custom CSS class to each menu item
In order to be able to easily target each menu item, we will assign a class to each of them.
To do this go to the administration and then to Appearance->Menu.
Then click on the Options button at the very top of the page and check the CSS Classes box:
A new CSS Classes (optional) box is now displayed for each item in your menu.
Now choose one CSS class per menu item to which you want to add an icon.
Use the Elegant Themes icons directly integrated into Divi
Divi originally integrates more than 150 icons (that you can find for example in the Blurbs modules) and that we can use with some CSS.
You will find the complete list on the Elegant Themes website. Here is an overview:
To use these icons, you will have to replace the with a backslash \.
We will then use the following CSS code:
Some explanations on this code:
- a:before: basically the HTML tag a corresponds to our menu item, which is the link and the pseudo element before means "before". So we will target the content before our menu item to insert our icon.
- font-family: 'ETModules': this allows us to load the font of Divi's icons to be able to use them.
- content: "": this property allows you to embed content between quotes.
- \e023: corresponds to the icon I want to load. The e023 comes from the list provided by Elegant Themes.
- margin-right: I define a margin to the right of the icon of 5px because otherwise it sticks completely to the menu. It's just a formality.
And here's the result:
Now all you have to do is choose the icons you want to display on the Elegant Themes list and adapt this code to each item on your menu.
So much for explanations. This CSS code will be used for all other different icon loads with a small modification each time.
Using the icons of the free FontAwesome library
The FontAwesome library includes more than 600 free icons to integrate into your sites, and they are probably the easiest to use. Here no CSS is needed, we will insert them directly in the administration from the menu page.
Since FontAwesome is not loaded by default on the sites, it will have to be.
To do this, copy and paste the following code in the functions.php file of your child theme ( or download ours here, it's already integrated 😉 ) :
This snippet allows us to load the icons directly from the FontAwesome servers and thus not slow down ours to do so.
Go now to the icons page:
Now choose the one you are interested in and click on it.
You are now on the next page:
Well, you're just going to have to copy the little piece of code at the bottom left: .
Now go back to the administration on the page of your menu and paste it before the text of it like this:
Our anchor icon is showing up nicely:
You can do the same for all the other menu items, and now you can also use these icons anywhere on your site!
Add an image of your choice
If you prefer to use an image of your choice, the method will again be almost identical.
We no longer need to define a font for our icons, just define the URL of the image to use (like on Divi Community). It is possible to use one of your own media or from an external site.
Here is an example of CSS:
We still use the content property, but this time with the url(' ') parameter with the URL to your image. Don't forget the quotation marks.
Also remember to optimize your image before uploading it. Do not use a 2000px image when it will be about 25px when displayed.
Here's how it looks on Divi Community:
Add icons with the free plugin Menu Icons by ThemeIsle
And if you don't feel like getting your hands in the code, you can use the Menu Icons by ThemeIsle plugin which integrates all the previous features without having to do anything.
Download the extension and activate it.
A new Icon button now appears under the menu items in the administration:
Click Select and choose the one you want from the list:
Voila, now you have no more excuses not to add icons to your menus 😉.