Comment ajouter des icônes dans le menu de Divi (sans plugin) ?

Mis à jour le 07/04/2021 | Publié le 03/06/2020 | 20 commentaires

Dans ce tutoriel rapide et facile, vous allez voir comment ajouter des icônes dans le menu de Divi. C’est très simple et surtout, c’est à la portée de tout débutant !

Icon Entete Defaut
Icônes dans le menu – En-tête par défaut

Pas besoin d’installer une extension complexe qui va alourdir encore votre site ! Vous verrez qu’avec un bout de code CSS le tour sera joué !

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Pourquoi ajouter des icônes dans le menu de Divi ?

Eh bien, parce que c’est tendance bien sûr ! Ou parce qu’une icône ça parle à tout le monde ?

Au premier coup d’œil, l’internaute saura vers quel élément du menu se diriger. Cela peut (peut-être) améliorer l’expérience utilisateur ?

Au-delà de ces raisons, les icônes égayent une page web, brisent la monotonie et habillent votre texte. En plus, ils sont natifs dans Divi… Alors, pourquoi s’en priver ?

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

2 – Ajouter une classe CSS aux éléments de menu

Dans un premier temps, vous devez activer l’ajout de Classes CSS au sein de votre menu.

C’est très simple. Allez à l’onglet Apparence > Menu et ouvrez les options de l’écran (tout en haut, à droite). Cochez « Classes CSS« .

Ajout Classe Menu Icon
Activer l’ajout de Classe CSS

Cette option permet de faire apparaître un nouveau champ au sein de chaque élément de menu : le champ Classes CSS.

Vous vous servirez alors de ce champ pour assigner une classe à chaque élément du menu où vous souhaitez ajouter une icône.

Ajout Classe Css Icon
Ajouter une classe à chaque élément de menu

Pour mon exemple, j’ai utilisé la Classe « ld-menu-home » mais j’aurais très bien pu utiliser la Classe « tartempion » cela n’aurait eu aucun impact. Donc utilisez ce champ pour insérer vos Classes.

Notez que vous ne devez pas utiliser d’accents, de caractères spéciaux ou d’espaces. Assignez une classe différente à chaque élément si vous souhaitez afficher des icônes différentes.

Ne tardez plus ! Découvrez le thème Divi ici !

3 – Insérer les icônes dans le menu de Divi grâce au CSS

Une fois que vous avez assigné une Classe à chaque élément du menu, vous pourrez ajouter du CSS pour faire apparaître les icônes dans le menu de Divi.

Si besoin, lisez cet article qui explique toutes les manières d’ajouter du code personnalisé dans Divi (dont le CSS).

Ajout Css Icone Menu
Ajoutez du CSS pour faire apparaitre les icônes dans le menu de Divi

Rendez-vous à l’onglet Apparence > Personnaliser > CSS Additionnel et copiez-collez le code suivant :

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

Explications :

  • Le .ld-menu-home appelle la classe définie plus tôt dans les éléments du menu (chapitre 2 de cet article).
  • font-family: ‘ETMODULES’ indique quelle police d’icônes utiliser. Cette police est native dans Divi, il suffit juste de l’appeler.
  • content: ‘\e009’; indique quel est l’icône à afficher.
  • color: #4d2ef; indique la couleur de l’icône (un site comme HTML Color Code peut vous aider à trouver la couleur idéale).

Si vous voulez insérer une icône différente pour chaque élément de menu, vous devrez alors dupliquer ce code autant que vous avez d’éléments et vous devrez changer la Classe CSS et le code de l’icône à chaque fois.

Voici par exemple le CSS que j’ai utilisé pour que chaque élément de mon menu affiche une icône différente :

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

Et voici le résultat en image :

Icon Entete Defaut
Icônes dans le menu – En-tête par défaut

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos ! Ou apprenez à vous servir efficacement de ce thème grâce à ma formation Divi !

4 – Choisir les icônes mis à disposition par Divi

Les codes icônes à afficher, je ne les ai pas inventé ! Il suffit de se reporter à la documentation, pour cela, rendez-vous sur la page officielle des Icônes de Divi.

Icones Elegantthemes
Utilisez les icônes mis à disposition par Elegantthemes

Dans la banque d’icônes, vous verrez qu’il existe un code pour chacune. Par exemple, le code de l’icône de la Maison (Home) est . Pour l’utiliser, vous devez supprimer le préfixe &#x et le point virgule (;). Le code icône de la maison est alors e009.

Autres exemples :

  • Le code de l’icône Horloge : 7d
  • Le code de l’icône Cadenas : 7e
  • Le code de l’icône Image : e005
  • Le code de l’icône Ampoule : e007
  • etc.

Ce sont donc ces codes que vous devrez reporter dans le CSS, à la ligne « content » pour afficher les icônes dans le menu de Divi :

content: '\e009';

5 – Les icônes du menu Divi fonctionnent pour tous les types d’en-tête

Peu importe quel est le type d’en-tête utilisé sur votre site, les icônes s’afficheront dans votre menu Divi : l’en-tête par défaut, l’en-tête centré, l’en-tête SlideIn, etc.

Icon Entete Centree
Icônes dans le menu – En-tête centré
Icon Entete Slidein
Icônes dans le menu – En-tête Slide In

Voilà !

Pour aller plus loin, je vous propose cette liste de lecture connexe :

6 – Icônes dans le menu Divi à la place du texte

Vous avez été plusieurs à le demander en commentaires : vous voulez afficher une icône à la place du texte du menu et non en plus du texte…

Voici alors une mise à jour de l’article pour compléter la première édition…

Afficher une icône dans le menu à la place du texte
Afficher une icône dans le menu de Divi à la place du texte
  1. Dans l’onglet Apparence > Menu, ouvrez les options de l’écran et activez l’option Classe CSS, si ce n’est pas déjà fait.
  2. Placez vos pages dans le menu, comme à votre habitude mais au lieu de conserver le titre de la navigation par défaut, copiez et collez le code de l’icône Divi désiré, comme expliqué au chapitre 4 de cet article. Par contre, vous conservez le code en entier : par exemple, le code de l’icône de la Maison (Home) est  ou 
  3. Placez ensuite une classe CSS, pour mon exemple, j’utilise ld-icon-menu.
  4. Renouvelez au que de besoin puis sauvegardez vos changements.
Afficher une icône dans le menu à la place du texte - partie 2
Ne pas oublier le code CSS
  1. Enfin, rendez-vous à l’onglet Apparence > Personnaliser > CSS Additionnel pour y placer le code suivant :
/*----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);
}

Voilà, lorsque vous sauvegardez, votre menu Divi affiche des icônes à la place du texte ! Génial !

7 – Insérer une icône personnalisée à la place du texte du menu

Si maintenant, les icônes natives de Divi ne vous plaisent pas, vous pouvez utiliser des icônes personnalisés que vous importez dans votre médiathèque.

Lors d’un précédent article, vous vous avais expliqué comment insérer des images dans le méga menu de Divi.

Il s’agit ici d’une variante…

Image dans le menu à la place du texte
Image dans le menu à la place du texte
  1. Importez vos images dans la médiathèque et copiez leurs URL.
  2. Rendez-vous ensuite à l’onglet Apparence > Menu. Ouvrez un élément de menu existant ou placez une nouvelle page dans votre menu. Dans le champ « Titre de la navigation » copiez le code suivant :
<img src="url-de-votre-image" alt="votre-texte-alternatif" width="20%" />
  1. Ajoutez une Classe CSS à votre élément de menu, par exemple : ld-icon-import. Sauvegardez votre menu.
Icône dans le menu Divi
Ne pas oublier le CSS pour améliorer l’affichage
  1. Enfin, rendez-vous à l’onglet Apparence > Personnaliser > CSS Additionnel pour y placer le code suivant :
/*----Align imag with text menu---- */

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

Ce code permet d’améliorer l’affichage de l’image mais il est facultatif ou dépend du type d’image que vous utilisez. Il est possible de devoir l’adapter à vos besoins.

Voilà… Enjoy !

Le saviez-vous ? Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE »

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

1,444 mots

6

Ça devrait vous plaire aussi :

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

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

Avez-vous pensé à personnaliser la page d’erreur 404 de votre site ? Non ? Pourtant, vous le devriez : non seulement c’est simple à faire, mais en plus, cela pourrait faire baisser votre taux de rebond ! L’idée est de conserver sur votre site l’internaute qui passerait par là. Découvrez le tuto pas à pas + la vidéo.

Appliquer des masques et des formes sur vos images avec Divi

Appliquer des masques et des formes sur vos images avec Divi

Les masques rendent vos images plus graphiques et offrent une originalité à votre mise en page. Savez-vous que vous pouvez les créer facilement à l’aide du Divi Visual Builder ? Je vous montre comment faire dans ce tutoriel et dans cette vidéo.

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