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:

activer classe css

 

Une nouvelle case Classes CSS (facultatives) s’affiche maintenant pour chaque item de votre menu.

classes css

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:

icones divi

Pour utiliser ces icônes, il faudra remplacer le &#x par un antislash \.

On va ensuite utiliser le code CSS suivant:

.tutoriel a:before {
	font-family: 'ETModules';
	content : "\e023";
	margin-right: 5px	;
}

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 :

exemple icone menu divi

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é 😉 ) :

// AJOUT DES ICONES FONT AWESOME 

wp_register_script( 'FontAwesome', 'https://use.fontawesome.com/releases/v5.0.2/js/all.js', null, null, true );

wp_enqueue_script('FontAwesome');

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:

 

fontawesome

 

Choisissez maintenant celui qui vous interesse et cliquez dessus.

Vous arrivez à la page suivante:

 

exemple fontawesome

 

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:

 

icone menu admin

 

Notre icône d’ancre s’affiche bien:

icone fontawesome divi

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:

.tutoriels a:before{
    content: url('https://www.divi-community.fr/wp-content/uploads/2018/03/np_professor_1175561_CC692F.png');
    margin-right: 8px;
    margin-top: -8px;
}

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:

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

menu icons

Téléchargez l’extension et activer la.

Un nouveau bouton Icon apparait maintenant sous les items des menus dans l’administration:

 

icon select

 

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 😉

D'autres tutoriels pouvant vous intéresser: