How to add icons in Divi's menu (without plugin)?

Updated on 25/09/2021 | Published on 03/06/2020 | 20 comments

In this quick and easy tutorial, you'll see how to add icons to the Divi menu. It's very simple and most importantly, 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 bit of CSS code it's all done!

Announcement: 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 to 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. Plus, they're native to Divi... So why deprive yourself?

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 enable the addition of CSS Classes within 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 the addition of a CSS Class

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 and it would have had no impact. So use this field to insert your Classes.

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

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

3 - Inserting icons in the Divi menu with CSS

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

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

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

Go to the Appearance > Customise > Additional CSS tab and copy and paste the code (snippet):

.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;
}

Explanation:

  • 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, you just have to call it.
  • content: '\e009'; indicates which icon to display.
  • color: #4d2ef; indicates the color of the icon (a site like HTML Color Code can help you find the right 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 items and you will have to change the CSS Class and the icon code each time.

For example, here is the CSS I used so that each item in my menu displays 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 is the result in pictures:

Icon Entete Defaut
Icons in the menu - Default header

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials! Or learn how to use this theme efficiently with my Divi training !

4 - Choose the icons provided by Divi

The icon codes to display, I did not 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 icon. For example, the code for the Home icon is . To use it, you must remove the &#x prefix and the semicolon (;). The Home icon code is then e009.

Other examples:

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

These are the codes that you will have to transfer to 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 be displayed in your Divi menu: the default header, the centered header, the SlideIn headeretc.

Icon Entete Centree
Icons in the menu - Centered header
Icon Entete Slidein
Icons in the menu - Slide In header

That's it!

To go further, I suggest this related reading list:

6 - Icons in the Divi menu instead of text

Many of you have asked in comments: you want to display an icon instead of the menu text and not in addition to the text...

Here is an update of the article to complete the first edition...

Afficher une icône dans le menu à la place du texte
Display an icon in the Divi menu instead of text
  1. In the Appearance > Menu tab, open the screen options and enable the CSS Class option, if not already enabled.
  2. Place your pages in the menu as usual but instead of keeping the default navigation title, copy and paste the desired Divi icon code as explained in chapter 4 of this article. However, you keep the entire code: for example, the code for the Home icon is or
  3. Then place a CSS class, for my example I use ld-icon-menu.
  4. Renew as needed and save your changes.
Afficher une icône dans le menu à la place du texte - partie 2
Don't forget the CSS code
  1. Finally, go to the Appearance > Customize > Additional CSS tab to place the following code:
/*----Replace text menu with icons---- */
 
.ld-icon-menu a {
    font-family: 'ETmodules';
    font-size: 18px !important;
    color: #ffffff !important;
}
 
.ld-icon-menu a:hover {
    font-size: 16px !important;
	  transform: rotate(15deg);
}

Now when you save, your Divi menu displays icons instead of text! That's great!

7 - Insert a custom icon in place of the menu text

If you don't like Divi's native icons now, you can use custom icons that you import into your media library.

In a previous article, you explained how insert images in Divi's mega menu.

This is a variant of the...

Image dans le menu à la place du texte
Image in the menu instead of text
  1. Import your images into the media library and copy their URLs.
  2. Then go to the Appearance > Menu tab. Open an existing menu item or place a new page in your menu. In the "Navigation Title" field copy the following code:
votre-texte-alternatif
  1. Add a CSS Class to your menu item, for example : ld-icon-import. Save your menu.
Icône dans le menu Divi
Don't forget the CSS to improve the display
  1. Finally, go to the Appearance > Customize > Additional CSS tab to place the following code:
/*----Align imag with text menu---- */

.ld-icon-import img {
    vertical-align: text-bottom !important;
}

This code allows you to improve the image display but it is optional or depends on the type of image you are using. You may have to adapt it to your needs.

Here you go... Enjoy!

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

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

1,445 words

6

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

20 Commentaires

  1. Marcelo

    Thank you for the tips. I’m having an issue, the codes appear wrong. For example, I enter ‘\ 69’ and, instead of the double document, play appears, which is the code ‘\ 49’. Any suggestion?

  2. Lycia Diaz

    Hello Marcelo,
    I don’t see where could be this issue…

  3. AnaïsM

    Bonjour Lycia,
    Merci pour ce tuto bien utile. Une question cependant:
    – En ce qui me concerne je souhaite remplacer le mot « home » par la maison… Comment puis-je faire cela? Lorsque je laisse le champ vide ça ne fonction pas.
    – Comment changer la couleur selon les états « active », survol etc? J’ai essayé mais je ne dois pas appeler les bons éléments puisque ca ne fonctionne pas!
    Merci pour votre aide!

  4. Lycia Diaz

    Salut Anaïs, pour le mot « home » ne s’agit-il pas simplement du nom que tu as donné à ta page ? Dans ce cas, c’est facile à modifier. Pour changer les états « active » et « survol » :
    – « Active » : c’est une option disponible dans Apparence > Personnaliser > En-tête et navigation > Barre primaire > Couleur du lien actif
    – « Survol » : c’est du CSS pur.

  5. Pat

    Salut, super tuto comme toujours.
    Mais si on veut n’avoir que l’icône, sans le texte ?
    J’ai essayé de bricoler le CSS mais ça marche pas… si quelqu’un a une idée je prends !
    Merci !

  6. ADELINE SCHINELLA

    Merci Pat de poser cette question ! je me demande la même chose !

    Comment rajouter une îcone seule ? : Par exemple, je voudrais rajouter une icône « bonhomme » pour la création de compte (mais sans le texte « compte »)

  7. Lycia Diaz

    Salut Adline et Pat ! Voilà, j’ai mis l’article à jour pour répondre à votre question : chapitre 6 et 7.

  8. Karine

    Bonjour et merci pour ce tuto, cependant je souhaite également utiliser uniquement l’icone « home » () mais j’ai un carré blanc qui s’affiche à côté de mon icône dans mon mon menu si je mets le le code de l’icône Divi dans le titre de la navigation.

  9. Lycia Diaz

    Salut Karine, tu as bien suivi le tuto ? Si tu mets le bon code comme indiqué, ça doit marcher.

  10. Karine

    Merci beaucoup pour ta réponse. J’ai en effet bien suivi le tuto avec le code -&#xe074- qui correspond à l’icône « home » de Divi. Et j’ai exactement le même carré que celui qui s’est affiché dans mon commentaire précédant.

    En alternative, pour ne pas avoir ce carré, j’ai remplacé le titre de mon menu par un point (.) mais ce point à côté de l’icône n’est pas très propre dans ma barre de navigation.
    url du site : https://ligue-de-squash-pdl.karine-design.fr/

  11. Lycia Diaz

    Hello Karine, si tu lis bien mon article : le code -&#xe074- doit se placer sans texte, sinon tu veux le texte à côté, tu dois utiliser seulement le code -e074-
    Là ça devrait marcher.

  12. Karine

    Bonsoir Lycia, oui c’est bien ce que j’ai fait à la base, j’ai juste mis le code sans aucun autre texte. Mais ça me met un carré à côté de l’icône (le même carré que dans mon tout premier post ) . C’est pour cette raison que j’ai mis un point pour être une alternative plus discrète que le carré.

  13. Lycia Diaz

    Karine, le tuto as été mis à jour la semaine dernière. Si tu veux juste l’icône sans texte, la solution est dans le chapitre 6 du tuto. Si tu veux l’icône + le texte, tu dois supprimer le préfixe &#x
    C’est peut-être un espace qui traine et qui empêche le code de fonctionner ?
    Reviens nous dire quand tu auras trouvé 😉

  14. Lesley

    Thanks so much for this, great tutorial. Used it to add a lock to my client login link.

  15. Lycia Diaz

    Great ! 😉

  16. Pat

    Meric Lycia pour la mise à jour !!! Bravo.

  17. Camille

    Bonjour Lycia,

    Merci pour ce tuto, je suis en train de créer mon site avec Divi et tes formations ainsi que ces astuces m’aident bien !

    J’ai cependant une question, dont je ne trouve la réponse nulle part.
    J’ai bien modifié le texte d’une de mes pages du menu (la page compte) par une icone. Cependant, lorsque l’on passe en menu mobile (avec le hamburger), la page « compte » passe dans le hamburger. J’aimerais que cette page reste présente visible (comme c’est le cas pour les icones de panier et de recherche) au lieu qu’elle passe dans le menu hamburger, mais je ne sais pas comment faire en CSS…
    Aurais-tu une petite idée ?

    Merci !

  18. Lycia Diaz

    Salut Camille, non ce n’est pas possible. Le CSS ne suffirait pas, il faudrait le coder en PHP, trop compliqué pour moi je pense.

  19. Maxime Bardou

    Bonjour Lycia,

    Merci beaucoup pour ce tuto et merci de prendre le temps de répondre aux questions, c’est du travail !

  20. Lycia Diaz

    Merci Maxime ! Oui c’est du travail, merci de le reconnaître 😉

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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