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

Publié le 03/06/2020 | 4 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

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 :

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

1,007 mots

4

Ça devrait vous plaire aussi :

Effet zoom sur image avec texte cliquable

Effet zoom sur image avec texte cliquable

Cet article vous explique comment obtenir simplement un effet zoom au survol des images avec un texte et un lien cliquable. Pas besoin d’extension, Divi permet de le faire facilement !

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

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