How do I add icons in the Divi menu (without plugin)?

Published on 03/06/2020 | 0 comments

In this quick and easy tutorial you will see how to add icons to the Divi menu. It's very simple and above all, it's within the reach of any beginner!

Icon Entete Defaut
Icons in the menu - Default header

No need to install a complex extension that will make your site even heavier! You'll see that with a piece of CSS code, it's done!

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Why add icons in the Divi menu?

Well, because it's trendy of course! Or because an icon speaks to everyone?

At first glance, the user will know which menu item to go to. This can (perhaps) improve the user experience?

Beyond these reasons, icons brighten up a web page, break the monotony and dress up your text. Moreover, they are native in Divi... So why deprive yourself of them?

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

2 - Adding a CSS class to menu items

First, you need to activate the addition of CSS Classes in your menu.

It's very simple. Go to the Appearance > Menu tab and open the screen options (top right). Check "CSS Classes" .

Ajout Classe Menu Icon
Enable CSS Class addition

This option allows a new field to appear within each menu item: the CSS Classes field.

You will then use this field to assign a class to each menu item where you want to add an icon.

Ajout Classe Css Icon
Add a class to each menu item

For my example, I used the "ld-menu-home" class but I could have used the "tartempion" class, it would have had no impact. So use this field to insert your Classes.

Note that you must not use accents, special characters or spaces. Assign a different class to each element if you want to display different icons.

Don't delay any longer! Discover the Divi theme here !

3 - Inserting icons in the Divi menu using CSS

Once you have assigned a Class to each menu item, you will be able to add CSS to make the icons appear in the Divi menu.

If need be, read this article which explains all ways to add custom code in Divi (including CSS).

Ajout Css Icone Menu
Add CSS to make icons appear in the Divi menu

Go to the Appearance > Customize > Additional CSS tab and copy and paste the following code :

.ld-menu-home > a:before {
    font-family: 'ETMODULES';
    content: '\e009'; /* change icon code here */
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #4d2def; /* change icon color here */
    font-size: 1em; /* change icon size here */
    transition: all .3s ease;
}

Explanations :

  • The .ld-menu-home calls the class defined earlier in the menu items (chapter 2 of this article).
  • font-family: 'ETMODULES' indicates which icon font to use. This font is native in Divi, just call it.
  • content: '\e009'; indicates the icon to be displayed.
  • color: #4d2ef; indicates the color of the icon (a site like HTML Color Code can help you find the ideal colour).

If you want to insert a different icon for each menu item, then you will have to duplicate this code as many times as you have elements and you will have to change the CSS Class and the icon code each time.

Here is for example the CSS I used to make each item of my menu display a different icon :

.ld-menu-home > a:before {
    font-family: 'ETMODULES';
    content: '\e009'; /* change icon code here */
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #4d2def; /*change icon color here */
    font-size: 1em; /*change icon size here */
    transition: all .3s ease;
}

.ld-menu-about > a:before {
    font-family: 'ETMODULES';
    content: '\7c';
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #4d2def;
    font-size: 1em;
    transition: all .3s ease;
}

.ld-menu-room > a:before {
    font-family: 'ETMODULES';
    content: '\e023';
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #4d2def;
    font-size: 1em;
    transition: all .3s ease;
}

.ld-menu-blog > a:before {
    font-family: 'ETMODULES';
    content: '\e104';
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #4d2def;
    font-size: 1em;
    transition: all .3s ease;
}

.ld-menu-contact > a:before {
    font-family: 'ETMODULES';
    content: '\e010';
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #4d2def;
    font-size: 1em;
    transition: all .3s ease;
}

.ld-menu-dispo > a:before {
    font-family: 'ETMODULES';
    content: '\5a';
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #4d2def;
    font-size: 1em;
    transition: all .3s ease;
}

.ld-menu-search > a:before {
    font-family: 'ETMODULES';
    content: '\55';
    text-align: center;
    margin-right: 10px;
    margin-left: -10px;
    color: #4d2def;
    font-size: 1em;
    transition: all .3s ease;
}

And here's the result in picture:

Icon Entete Defaut
Icons in the menu - Default header

4 - Choose the icons provided by Divi

The icon codes to display, I didn't invent them! You just have to refer to the documentation, for that, go to the official Divi Icons page.

Icones Elegantthemes
Use the icons provided by Elegantthemes

In the icon bank, you will see that there is a code for each one. For example, the code for the Home icon is . To use it, you must remove the prefix &#x and the semicolon (; ). The Home icon code is then e009.

Other examples :

  • The Clock icon code: 7d
  • The code for the Padlock icon: 7th
  • The code of the Image icon: e005
  • The code for the Bulb icon: e007
  • etc.

So these are the codes that you will have to transfer in the CSS, in the "content" line to display the icons in the Divi menu:

content: '\e009';

5 - Divi menu icons work for all header types

No matter what type of header is used on your site, the icons will appear in your Divi menu: the default header, centered header, the SlideIn headeretc.

Icon Entete Centree
Icons in the menu - Header centered
Icon Entete Slidein
Icons in the menu - Slide In Header

Voilà!

To go further, I propose this related playlist:

Icone Menu Divi Pinterest
Ajouter Icones Menu Divi
Add Icon Divi Menu

1,007 words

4

You should like it too:

Images rognées (recadrées) dans Divi : comment éviter cela ?

Cropped (cropped) images in Divi: how to avoid this?

Why does Divi display cropped images? This is often the case for the thumbnails of the Blog and Portfolio modules... Without forgetting the Divi Gallery... In these 3 modules the images are trimmed, cropped, cropped ! Here's how to fix this...

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This