How to add icons to the Divi menu (without plugin)?

Updated on 25/09/21

1501 words

6 reading minutes

27 359

38 comments

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

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

Icons in the menu – Default header

No need to install a complex extension that will further burden your site! You will see that with a piece of CSS code the turn will be played!

In the programme of this article: Hide

1 – Why add icons to the Divi menu?
2 - Add CSS class to menu items
3 – Insert icons in the Divi menu with CSS
4 - Choose icons made available by Divi
5 - Divi menu icons work for all header types
6 – Icons in the Divi menu instead of text
7 - Insert a custom icon instead of menu text

1 – Why add icons to the Divi menu?

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

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

Beyond these reasons, icons brighten up a web page, break monotony and dress your text. Besides, they're natives in Divi... so why don't they?

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

2 - Add CSS class to menu items

First, you have to enable the addition of CSS Classes within your menu.

It's very simple. Go to tab Appearance > Menu and open them screen options (top, right). Check " CSS classes« .

Enable Add CSS Class

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

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

Add a class to each menu item

For my example, I used the Class " ld-menu-home But I could have used the Class " piempion 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 item if you want to display different icons.

Don't delay! Discover the theme Divi here !

3 – Insert icons in the Divi menu with CSS

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

If necessary, read this article that explains all ways to add custom code in Divi (including CSS).

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

Go to the tab Appearance > Customize > Additional CSS and copy the code (Snippet) following :

.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).
fat-family: ‘ETMODULES' indicates which font of icons to use. This font is native in Divi, just call it.
content: ‘e009'; indicates which icon is to be displayed.
color: #4d2ef; indicates the color of the icon (a site as HTML Color Code can help you find the perfect color).

If you want to insert a different icon for each menu item, you will then have to duplicate this code as much as you have d CSS class and icon code Every time.

Here is for example the CSS that I used for each item in my menu to 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 picture result:

Icons in the menu – Default header

Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos! Or learn how to effectively use this theme through my training Divi !

4 - Choose icons made available by Divi

The icon codes to display, I didn't invent them! All you have to do is refer to the documentation, so go to the official Divi Icons page.

Icones Elegantthemes — Use the icons made available by Elegantthemes

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

Other examples:

The icon code Clock: 7d
The Cadenas icon code: 7e
The icon code Image: e005
The icon code Bulb: e007
etc.

Those are the codes that you will have to report in the CSS, at the line "content" for show icons in the Divi menu :

content: '\e009';

5 - Divi menu icons work for all header types

No matter what type of header you use on your site, the icons will display in your Divi menu : default header, centered header, SlideIn headerkeyhead–keyhead in the menu

To go further, I propose this related playlist:

Header and Divi menu: all settings

Use

Icomoon in WordPress

Boost your knowledge with my Divi training!

6 – Icons in the Divi menu instead of text

, open the screen options and activate the option

If not already done.

Show an icon in the menu instead of text — 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. On the other hand, you keep the entire code: for example, the Home icon code is

In the tab Appearance > MenuThen place a CSS class, for my example, I use CSS classld-icon-menu
Renew as needed and save your changes.  or 
Do not forget the CSS code to place the following code:.
Here, when you save, your Divi menu displays icons instead of text! Great!

Show an icon in the menu instead of text - part 2 — If you don't like Divi's native icons now, you can use custom icons that you import in your media library.

Finally, go to the tab Appearance > Customize > Additional CSS In a previous article, you explained how

/*----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);
}

insert images in Divi's mega menu

7 - Insert a custom icon instead of menu text

This is a variant...

Image in the menu instead of text Import your images into the media library and copy their URLs..

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:

Add a CSS Class to your menu item, for example:

ld-icon-import
. Save your menu.

<img src="url-de-votre-image" alt="votre-texte-alternatif" width="20%" />

Ajoutez une Classe CSS à votre élément de menu, par exemple : ld-icon-import. Sauvegardez votre menu.

Icon in the Divi menu — Do not forget CSS to improve the display

Finally, go to the tab Appearance > Customize > Additional CSS In a previous article, you explained how

/*----Align imag with text menu---- */

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

This code improves the image display but it is optional or depends on the image type you use. It is possible to adapt it to your needs.

There... Enjoy!

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

Divi training via CPF

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

Proudly translated by wpLingua, the translation extension for WordPress That I develop! SEO-Friendly / Automatic / Editable

Your comments...

38 Commentaires

Marcelo sur 11 septembre 2020 à 21:19

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?
Lycia Diaz sur 11 octobre 2020 à 18:03

Hello Marcelo,
I don’t see where could be this issue…
AnaïsM sur 13 novembre 2020 à 14:52

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!
Lycia Diaz sur 22 novembre 2020 à 17:30

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.
Pat sur 19 mars 2021 à 17:39

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 !
ADELINE SCHINELLA sur 23 mars 2021 à 19:07

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 »)
Lycia Diaz sur 7 avril 2021 à 16:06

Salut Adline et Pat ! Voilà, j’ai mis l’article à jour pour répondre à votre question : chapitre 6 et 7.
Karine sur 11 avril 2021 à 19:13

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.
Lycia Diaz sur 12 avril 2021 à 13:56

Salut Karine, tu as bien suivi le tuto ? Si tu mets le bon code comme indiqué, ça doit marcher.
Karine sur 12 avril 2021 à 14:15

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/
Lycia Diaz sur 12 avril 2021 à 19:39

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.
Karine sur 12 avril 2021 à 19:43

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é.
Lycia Diaz sur 12 avril 2021 à 19:51

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é 😉
Lesley sur 22 mai 2021 à 02:15

Thanks so much for this, great tutorial. Used it to add a lock to my client login link.
Lycia Diaz sur 25 mai 2021 à 23:48

Great ! 😉
Pat sur 27 mai 2021 à 09:32

Meric Lycia pour la mise à jour !!! Bravo.
Camille sur 24 juin 2021 à 19:29

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 !
Lycia Diaz sur 25 juin 2021 à 08:50

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.
Maxime Bardou sur 21 juillet 2021 à 16:46

Bonjour Lycia,

Merci beaucoup pour ce tuto et merci de prendre le temps de répondre aux questions, c’est du travail !
Lycia Diaz sur 26 juillet 2021 à 21:18

Merci Maxime ! Oui c’est du travail, merci de le reconnaître 😉
Youssef sur 21 décembre 2021 à 15:23

Bonjour Lycia,

comme d’habitude superbe article très détaillés.

Je voudrai intégrer mes icones que j’ai créé avec Inkscape au format png ou svg et difficile de trouver un tuto sur le web pour ce point en particulier

Une idée svp ?
Saurel sur 31 janvier 2022 à 11:50

Bonjour,

J’ai rencontré un problème sur mon menu, les icones s’affichent correctement sur mozilla, mais sur les autres navigateurs, il n’y a pas de problème, pourtant j’ai essayé de changer d’icone et cela marche correctement,

d’où peut venir le problème
Lycia Diaz sur 31 janvier 2022 à 11:56

J’en ai aucune idée. Peut-être le cache ?
Sarah sur 26 avril 2022 à 23:21

Bonjour !

J’ai un problème d’envergure : il se trouve que lorsque je suis sur « personnaliser » afin de modifier les codes, les icons apparaissent correctement et tout fonctionne. Mais lorsque je me rend directement sur mon blog, aucun icon ne correspond (sauf un, ce qui est bien étrange). J’ai d’ailleurs remarqué que les icons de votre menu ne fonctionnaient pas non plus, peut-être est-ce un problème de navigateur ou autre ?
Lycia Diaz sur 28 avril 2022 à 21:49

Va à l’onglet Divi > Option du thème > Créateur et désactive la génération de fichiers statiques
Bertrand sur 26 juillet 2022 à 10:27

Bonjour Lycia.

Merci pour le coup de pouce ! J’ai une question toutefois. J’ai mis une icone dans le menu (sans texte). Cependant, j’avais un petit carré à la place de mon icône. J’ai dû faire comme si j’avais du texte et mis une balise à la place. Bref, ça fonctionne pour l’ordinateur mais en revanche en version mobile dans mon menu déroulant les icônes sont bien présentes (je peux cliquer dessus), mais impossible de les voir, elles n’apparaissent pas. J’ai essayer de changer la couleur (elles sont en blanc sur le site), mais rien à faire, elles n’apparaissent pas dans mon menu déroulant…
T’a-t-il un bout de CSS à entrer pour le mobile ?? Merci.
Lycia Diaz sur 28 juillet 2022 à 17:28

Je pense que c’est à cause du cache de Divi. Il faut le désactiver à Divi > Options du thème > Créateur > Avancé et désactiver l’option « génération de fichier CSS statistiques »
stephanie sur 7 septembre 2022 à 13:18

Bonjour Lycia,

Merci pour ce super tuto! j’ai un petit problème avec les icons, lorsque je suis sur la page personnalisée, mes icons apparaissent bien. J’ai mis 2 icones dans mon menu une pour ma page contact et une pour ma page login. lorsque je navigue sur mon site, les icones disparaissent en fonction des pages de mon menu. par exemple si je vais sur ma page d’accueil, les icones disparraissent du menu mais sur la page « a propos », les icones sont bien présentes. J’ai essayé de désactiver l’option « génération de fichier CSS statistiques », cela n’a rien changé. une idée? Merci beaucoup!
Lycia Diaz sur 8 septembre 2022 à 23:03

Ah c’est bizarre car justement j’allais te dire de désactiver la génération de CSS. Peut-être as-tu un plugin de cache ?
Lycia Diaz sur 8 septembre 2022 à 23:23

Utilises plutôt le thème builder et ajoute des modules images avec un lien dessus, c’est bien plus simple que de tout recoder
stephanie sur 9 septembre 2022 à 09:07

Merci Lycia pour ta réponse. En faite j’ai désactivé l’option « dynamic icons » et ça a marché!
Stephane sur 3 octobre 2022 à 12:06

Bonjour Lycia,

petite question complémentaire pour laquelle je ne trouve de réponse nulle part sur la toile, y’a t’il un moyen simple d’intervertir l’icone du panier et de recherche, a savoir mettre le panier apres le bouton search ?
merci de tes éclaircissements !! a bientôt
Lycia Diaz sur 3 octobre 2022 à 23:02

Bonne question. Ce doit être faisable en codant je suppose. Je n’ai pas de solution à te proposer par l’instant
Raffi sur 20 octobre 2022 à 23:35

Hello !
Merci pour le tuto ! ça marche nickel.

=> une astuce pour passer le picto à droite (plutôt qu’à gauche du texte du menu) ?
Lycia Diaz sur 1 novembre 2022 à 22:43

Hum bonne question…
Raffi sur 2 novembre 2022 à 17:32

C’est bon j’ai trouvé comment faire passer le picto de gauche à droite de l’intitulé du menu.
(dans mon cas c’est le menu secondaire, donc pour ceux qui en aurait besoin pour le menu primaire il faudra remplacer #et-secondary-menu par la bonne class (que je connais pas de mémoire et je préfère ne pas laisser d’indications hasardeuses)

#et-secondary-menu li >a:before {
position:absolute;
right: -15px;
}
#et-secondary-menu li {
padding-right: 25px;
}
Anne sur 19 octobre 2023 à 15:55

Bonjour, quel code CSS peut-on ajouter pour que l’icône soit de taille raisonnable en affichages tablette et mobile ?

Merci !
Lycia Diaz sur 29 octobre 2023 à 11:48

Ah mince, bonne question. C’est un peu compliqué car il faut inspecter le code puis l’écrire avec des Medias Queries. Je ne peux pas vraiment te répondre là comme ça…