Ajouter des icônes dans sa barre de menu

Rendez votre barre de navigation plus attractive, simplement avec 2 plugins, sans code

Des icônes sociales

Objectif : Rajouter vos icônes web 2.0 (Facebook, Twitter) dans votre barre de menu en 4 clics.
Ce plugin va rajouter la sélection d’icônes directement dans les liens du menu de WordPress et l’afficher sans texte. C’est extrêmement simple à utiliser et permet d’éviter d’avoir à toucher au code CSS.
Après avoir installé le plugin « Menu Social Icons » , il suffit d’aller dans son tableau de bord à la page Apparence / Menu :

  1. A gauche, dans le bloc « Liens », sélectionnez  votre icône
  2. Ajoutez là au menu
  3. Renseignez le lien et enregistrez
  4. C’est tout
ajout-icone-menu
4 étapes pour afficher l’icône Twitter dans son menu principal

C’est idéal pour rajouter les liens vers ses comptes twitter ou facebook. Comme dans mon exemple, vous pouvez aussi rajouter une petite enveloppe si vous souhaitez que les visiteurs vous contactent directement en utilisant votre adresse email. Pour cela veillez bien à indiquer dans le champ « Adresse web » l’instruction « mailto » sans http// :

mailto:nom@domaine.com

A noter que le développeur met à disposition des codes pour en modifier le fonctionnement :
http://wordpress.org/plugins/menu-social-icons/

Source : http://sridharkatakam.com/adding-social-icons-navigation-using-menu-social-icons-plugin/

Des icônes parmi l’immense collection Font Awesome

Objectif : Afficher une petite icônes à gauche d’un élément du menu
Font Awesome est une police de caractère libre, gratuite et légère, qui propose plusieurs centaines d’icônes pour tout illustrer, et régulièrement mise à jour avec des ajouts. Comme c’est une police, on pourra régler sa taille et surtout lui rajouter des effets CSS3.
Attention, après avoir installé le plugin « Font Awesome 4 Menus« , rien n’est disponible directement. Il faut aller dans les FAQ du plugin pour récupérer les instructions et les codes, mais c’est très simple, c’est une instruction CSS à copier et à coller dans le champ CSS d’un item du menu.

Si ce n’est pas le cas, il faut d’abord rendre le champ Classes CSS visible. Pour cela, il faut l’activer via les options de l’écran :

options de l'écran
Modifier les options d’écran

Ensuite, il faut suivre ces 4 étapes :

  1. Il faut sélectionner l’icône. Pour cela, il faut se rendre sur la page de présentation et cliquer celle qui vous intéresse:
    http://fortawesome.github.io/Font-Awesome/icons/
  2. Sur la page dédiée, il faut récupérer le code. Ici « fa-home »
  3. Et coller ce code dans le champ classe CSS du menu
  4. C’est tout !
Insérer FontAwesome dans son menu
4 étapes pour rajouter une icône devant un intitulé de menu

A noter que ce plugin permet également d’insérer les icônes directement dans son contenu, comme par exemple

[fa class="fa-check-square-o"]
Ajouter les icones avec un shortcode
Des icônes directement dans le contenu

Attention, avec cette technique, toutes les icônes ne sont pas utilisables. Pour bénéficier de toutes, il faut plutôt faire une insertion manuelle, comme expliquée dans  ce tutoriel :
http://mosaika.fr/ajouter-police-icones-webfont-wordpress-fontawesome/

BONUS : Technique CSS

Grâce à la méthode du remplacement d’image, il est possible de remplacer un intitulé du menu par une image. C’est assez simple. Voilà un tuto récent :

http://www.appnovation.com/blog/modern-approach-css-image-replacement

En résumé, pour rajouter des drapeaux dans votre menu, il vous suffit de créer au moins 3 styles

Cacher le texte

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Prévoir l’emplacement de l’image

.show-image {
margin-top: 10px; /* A adapter selon votre site */
width: 32px; /* Largeur du drapeau */
height: 21px; /* Hauteur du drapeau */
}

Afficher l’image

.fr {
background: url(/wp-content/uploads/2017/11/flag_FR.png); /* URL du drapeau FR */
}
.gb {
background: url(/wp-content/uploads/2017/11/flag_UK.png); /* URL du drapeau anglais */
}

Rajouter un élément du menu

Enfin il suffit de renseigner un lien personnalisé (et d’en faire un par langue en remplaçant fr par gb)

Bonus mai 2017 : Une bonne synthèse et des techniques à jour dans cet article
https://premium.wpmudev.org/blog/add-icons-wordpress-menus/

Bonus 2023 : Et cette extension pour insérer aussi ses propres images
https://wordpress.org/plugins/menu-image/