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:

activate class css

 

A new CSS Classes (optional) box is now displayed for each item in your menu.

css classes

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:

divi icons

To use these icons, you will have to replace the &#x with a backslash \.

We will then use the following CSS code:

.tutoriel a:before {
	font-family: 'ETModules';
	content : "\e023";
	margin-right: 5px	;
}

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:

example icon divi menu

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 😉 ) :

// AJOUT DES ICONES FONT AWESOME 

wp_register_script( 'FontAwesome', 'https://use.fontawesome.com/releases/v5.0.2/js/all.js', null, null, true );

wp_enqueue_script('FontAwesome');

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:

 

fontawesome

 

Now choose the one you are interested in and click on it.

You are now on the next page:

 

Fontawesome example

 

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:

 

admin menu icon

 

Our anchor icon is showing up nicely:

fontawesome divi icon

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:

.tutoriels a:before{
    content: url('http://www.divi-community.fr/wp-content/uploads/2018/03/np_professor_1175561_CC692F.png');
    margin-right: 8px;
    margin-top: -8px;
}

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:

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

icon menu

Download the extension and activate it.

A new Icon button now appears under the menu items in the administration:

 

icon select

 

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