WordPress : remplacer le texte d’un menu par une icône.

WordPress : remplacer le texte d’un menu par une icône.

Il est parfois utile de remplacer le lien texte d’un menu par une icône. Par exemple pour remplace le texte « Accueil » par une icône de maison.

Nous concevons le site de la société Wizaero, spécialiste en maintenance et en SEO. Dernièrement nous avons dû ajouter une icône de connexion située tout à droite dans le menu principal, visible sur l’image suivante :

Une solution très simple consiste à appeler l’image en HTML depuis la gestion de votre menu de Worpress.

Pour cela :

  1. il suffit de placer votre icône dans un dossier image de votre site. Pour faire ça proprement nous avons créé un dossier « image » dans le dossier du thème. Puis nous avons importer notre image « icone.svg » dedans.
  2. ensuite il suffit d’appeler l’image en HTML directement dans le champ « Titre de la navigation » de la gestion des menus.

Voici le code à renseigner :

<img src="https:/votresite.com/wp-content/themes/montheme/image/icone.svg">

Bien sûr, »votresite.com », « montheme » et « icone.svg » sont à remplacer par vos propres url de site, nom de thème et nom de fichier de votre icône.

Voilà ce que ça donne depuis la gestion des menus WordPress :

Une fois enregistré, votre icône apparaitra dans le menu.

Il faudra ensuite ajuster l’apparence grâce à quelques lignes de CSS. Voilà ce que nous avons ajouté dans le fichier « style.ccs » du thème :

#site-header .primary-menu-wrapper #menu-item-211{
  width: 50px;
  height: auto;
  border-left: 2px solid #426def1a;
  padding: 0px 0 0 20px;
  display: block;
  top: -2px;
}

Et voilà le résultat :