Ajouter des icônes à vos menus permet d’attirer rapidement l’oeil de vos visiteurs et de leur permettre de savoir ce qu’ils sont susceptibles de trouver sur vos différentes pages.
Il existe différents moyens d’en ajouter à chacun des liens de vos menus et nous allons les voir ensemble.
Sachez toutefois que si vous ne voulez pas toucher au code, je vous présente un plugin gratuit à la fin de cet article pour en ajouter facilement.
Ajouter des icones au menu de Divi sans plugin
Tout d’abord, il faut savoir que vous pouvez utiliser différentes sources d’icones:
- Les icônes d’Elegant Theme directement intégrés à Divi
- la bibliothèque gratuite FontAwesome
- Des sites spécialisés dans tous les genres d’icones comme Noun Project, qui sont généralement payants.
- des images de votre choix
On va commencer par…
Donner une classe CSS personnalisée à chaque élément du menu
Pour pouvoir cibler facilement chaque élément du menu, on va leur attribuer chacun une classe.
Pour ceci rendez-vous dans l’administration puis dans Apparence->Menu.
Cliquez ensuite sur le bouton Options de l’écran tout en haut de la page et cochez la case Classes CSS:
Une nouvelle case Classes CSS (facultatives) s’affiche maintenant pour chaque item de votre menu.
Choisissez maintenant une classe CSS par élément du menu auquel vous souhaitez ajouter un icône.
Utiliser les icônes d’Elegant Themes directement intégrés à Divi
Divi intègre d’origine plus de 150 icônes (que vous pouvez trouver par exemple dans les modules Blurbs) et que nous pouvons utiliser avec un peu de CSS.
Vous trouverez la liste complète sur le site d’Elegant Themes dont voici un aperçu:
Pour utiliser ces icônes, il faudra remplacer le &#x par un antislash \.
On va ensuite utiliser le code CSS suivant:
Quelques explications sur ce code:
- a:before: en gros la balise HTML a correspond à notre item du menu, qui est le lien et le pseudo élément before signifie “avant”. On va donc cibler le contenu avant notre item de menu pour y insérer notre icône.
- font-family: ‘ETModules’ : cela nous permet de charger la police des icônes de Divi pour pouvoir les utiliser
- content : “” : cette propriété permet d’intégrer le contenu compris entre les guillements
- \e023 : correspond à l’icône que je souhaite charger. Le e023 provient de la liste fournit par Elegant Themes.
- margin-right: je définis une marge à droite de l’icône de 5px car sinon il se colle complètement au menu. C’est juste de la mise en forme.
Et voici le résultat obtenu :
Vous n’avez maintenant plus qu’à choisir les icônes que vous voulez afficher sur la liste d’Elegant Themes et d’adapter ce code à chaque élément de votre menu.
Voilà pour les explications. Ce code CSS nous servira pour tous les autres chargements différents des icônes avec une petite modification à chaque fois.
Utiliser les icônes de la bibliothèque gratuite FontAwesome
La bibliothèque FontAwesome regroupe plus de 600 icônes gratuits à intégrer à vos sites, et c’est probablement les plus simples à manier. Ici pas besoin de CSS, on va les insérer directement dans l’administration depuis la page des menus.
FontAwesome n’étant pas chargé par défaut sur les sites, il va falloir le faire.
Pour ceci, copiez-collez le code suivant dans le fichier functions.php de votre thème enfant ( ou téléchargez le notre ici, c’est déjà intégré 😉 ) :
Ce snippet nous permet de charger les icônes directement depuis les serveurs de FontAwesome et du coup de ne pas ralentir le notre pour le faire.
Rendez-vous maintenant sur la page des icônes:
Choisissez maintenant celui qui vous interesse et cliquez dessus.
Vous arrivez à la page suivante:
Et bien il va simplement falloir copier le petit bout de code en bas à gauche: <i class=”fas fa-anchor”></i>.
Retournez maintenant dans l’administration sur la page de votre menu et collez le avant le texte de celui-ci comme ceci:
Notre icône d’ancre s’affiche bien:
Vous pouvez faire de même pour tous les autres items de menu, et maintenant vous pouvez également utiliser ces icônes n’importe ou sur votre site!
Ajouter une image de votre choix
Si vous préférez utiliser une image de votre choix, la méthode sera encore une fois presque identique.
On n’a plus besoin de définir une police pour nos icônes, simplement de définir l’URL de l’image à utiliser (comme sur Divi Community). Il est possible d’en utiliser une soit de vos médias, soit d’un site externe.
Voici un exemple de CSS:
On utilise toujours la propriété content, mais cette fois avec le paramètre url(‘ ‘) avec l’URL vers votre image. N’oubliez pas les guillemets.
Pensez également à optimiser votre image avant de la charger. N’utilisez pas une image de 2000px alors qu’une fois affichée elle en fera environ 25.
Voila par exemple ce que ça donne sur Divi Community:
Ajouter des icônes avec le plugin gratuit Menu Icons by ThemeIsle
Et si vous n’avez pas envie de mettre les mains dans le code, sachez que vous pouvez utiliser le plugin Menu Icons by ThemeIsle qui intègre toutes les fonctionnalités précédentes sans avoir besoin de faire quoi que ce soit.
Téléchargez l’extension et activer la.
Un nouveau bouton Icon apparait maintenant sous les items des menus dans l’administration:
Cliquez sur Select et choisissez dans la liste celui que vous voulez:
Voila, maintenant vous n’avez plus d’excuses pour ne pas ajouter d’icônes à vos menus 😉
Merci, c’est super. Perso, je préfère utiliser la bibliothèque gratuite FontAwesome.
Merci, c”est super. Perso, je préfère utiliser la bibliothèque gratuite FontAwesome.
Bonjour,
j’ai scrupuleusement suivi la méthode indiquée en CSS mais aucun icone ne s’affiche.
Y a-t’il une option que j’aurais cochée dans divi ou la personnalisation de thème qui empêcherait l’affichage?
j’ai exploré mais reste sans solutions
merci.
Bonjour, tu as essayé d’ajouter quoi comme icône?
Impossible de voir mon ancien comm’ donc je le remets :
Bonjour, j’ai scrupuleusement suivi la méthode indiquée en CSS mais aucun icone ne s’affiche. Y a-t’il une option que j’aurais cochée dans divi ou la personnalisation de thème qui empêcherait l’affichage? j’ai exploré mais reste sans solutions merci.
Bonjour, tu as essayé d’ajouter quoi comme icône?
J’ai essayé l’icone e009 (icone home) d’elegant icon font, police enregistrée dans mon theme sous “elegant”, qui m’a déjà servi pour le contenu de ma page d’accueil.
class du menu : menuacc
css ajouté :
.menuacc a:before {
font-family: ‘elegant’;
content : “\e009”;
}
Bonjour, merci pour pour ce snippet bien utile. Y a-t-il moyen d’utiliser les icones de FontAwesome dans le module ‘Résumé’ ? C’est-à-dire d’ajouter des icones à ceux qui sont proposés par défaut dans l’onglet ‘icones’.
Salut, tu peux les télécharger en png pour avoir un fond transparent et les ajouter en tant qu’image dans ton module résumé.
Bonjour à tous, et merci pour le tuto bien utile.
Comment faire pour que les icônes apparaissent sur le browser chrome (de temps en temps elles s’affichent.. ou pas) ?
PS: je travaille en localhost
Bonjour André, tu parles des icônes FontAwesome?
Bonjour Julien,
Merci de ton rapide retour
Non, ce ne sont pas les icones de Divi mais bien des (icones)images (format PNG, 16x16px sans fond) personnalisées.
Depuis ma question, les images s’affichent (probablement les “caches”, mais je ne suis pas très technique).
Je suis depuis sur la search bar que j’ajoute au primary menu… aurais tu un bon tuto?
Hi, great article. I used “Add a picture of your choice” method. However the icon shows also for each dropdown menu item. Do you know how I can remove it for the dropdown menu?
Thank you in advance !
Salut, tu parles français non?
Salut Julien,
Oui, désolée, j’ai écrit le commentaire sur l’article en anglais mais j’ai eu un message d’erreur donc je l’ai copié ici.
Je voudrais savoir comment éviter que les icônes s’affichent pour tous les élément de menu secondaire. J’ai trouvé une solution entre temps en ajoutant ce code :
.nav li ul a:before{
display: none
}
Merci quand même ! 🙂
Salut, il te suffit d’ajouter une classe CSS personnalisée par sous-menu pour les cibler précisément à la manière des menus principaux.
Bonjour Julien,
idee interessante et bien exposee, merci. J’aurais voulu en profiter par le code mais je n’ai pas “le bouton Options de l’écran” !?
Je vais utiliser ThemeIsle en attendant.
Salut Julien et merci pour ce tuto qui me rend bien service.
Mon icone est un peu decalee verticalement d’une dizaine de pixels trop haut par rapport au texte de mon sous-menu. Y a-t-il une solution pour remedier a ceci stpl ?
Bonjour et merci. Oui tu peux le positionner en jouant sur sa position en hauteur en pixel. Tu aurais un lien à me montrer?
Bonjour, tu as résolu ton problème?
Oui merci Julien tout fonctionnait bien au final.
Bonjour Julien,
oui c’est réglé, j’avais le bouton sous les yeux mais je ne le voyais pas, je le cherchais désespérément a gauche !
En revanche je cherche a réduire un décalage de l’icône sur un sous-menu.
Merci encore et bonne journée.
Rebonjour Julien
voici le lien :
le menu “Amis”
J’aurais voulu le mettre en 3eme position c’est-a-dire tout a droite mais le sous menu est coupe dans ce cas. WordPress/Divi ne fait pas le calcul pour le reculer a ce qu’il soit entièrement visible, dommage mais il y a surement une solution.
Tiens regarde ce tuto que tu peux adapter pour modifier la taille de ton sous-menu: https://www.divi-community.fr/snippets-divi/elargir-taille-menu-de-divi/
Oui merci pour ce Tuto, je l’avais deja corriger en local mais pas eu le temps de le faire pour le distant pour te passer le lien. C’est bien sur ce Tuto que je m’étais basé.
Bonne journee
Julien,
quand je dis que le menu est “coupe”, je veux dire qu’il ne peut pas s’afficher en entier horizontalement, on ne voit qu’environ 1.5cm, juste le debut du libelle.
Hello, et merci pour ce tuto ! Ça marche aussi pour le menu burger ? Je veux dire, peut-on simplement remplacer le burger par une icône ?
Bonjour, c’est possible mais ça ne sera pas tout à fait le même code et il faudra faire des adaptations.
Salut, l’insertion des icônes fonctionne quand on est en local ?
Oui bien sûr, peu importe si le site est en ligne ou non.
Bonjour,
merci pour ces explications très claires. Je l’ai mis en place et ça fonctionne parfaitement sur la page d’accueil mais pas sur les autres pages pourtant c’est le même menu (l’icone n’apparait pas correctement, il y a un petit carré avec le code du picto EO23).
Je ne trouve pas comment faire pour corriger cela. Merci pour ton aide.
Je rajoute que ca ne marche que sur la page d’accueil avec Firefox et sur aucune page avec Chrome et Safari…
Y a -t-il u réglage dans les paramètres du thème DIVI ?
Hello, tu peux nous donner l’URL?
Hello,
Merci beaucoup pour ce tuto très clair qui m’a évité d’aller télécharger un nouveau plug-in !
Petite question : Avez-vous une idée de comment faire pour “supprimer” le titre du menu. Je veux dire : je souhaiterais que l’un des éléments du menu n’apparaisse qu’avec son image et non son titre.
Hello, tu peux essayer de cibler le titre et de lui appliquer un display:none; en CSS
Bonjour
J’ai activé le méga menu, j’ai ajouté des icones avec FontAwesome et ca fonctionne parfaitement.
En revanche j’aurais aimé aussi personnaliser la couleur du texte et je ne trouve pas comment faire….
Je pourrais avoir un peu d’aide ? merci 🙂
Hello, il va falloir passer par le CSS dans ce cas si tu veux des couleurs différentes. Si c’est pour changer toutes les couleurs tu peux le faire depuis les options de Divi.
Oui en effet je pense qu’il faut passer par le CSS mais je ne sais pas quelles class éditer et/ou ajouter
hello,
merci pour les infos, j’ai un menu mix ( txt & ico )
et je voudrais augmenter la taille des ico de fontawasome..
j’ai colle une css perso .. avec un font size mais 0 impact…
Bonjour, quel code utilises-tu pour les icônes ?
Bonjour,
Merci pour ce tuto très clair. J’ai une demande supplémentaire : comment faire pour ne faire apparaître l’icône que pour la page sélectionnée ?