Intégrer Font Awesome dans votre site WordPress

Les internautes viennent sur un site web pour y chercher une information ou effectuer une tâche (s’inscrire, chercher un logement, faire un paiement…). Ils ne viennent pas pour parcourir tout le site (sauf quelques exceptions) et veulent rapidement trouver une information.

Pour faciliter la recherche et aider l’internaute, il existe de nombreuses solutions: bien hiérarchiser le contenu (avec des titres, des paragraphes, des listes…), ajouter une navigation ou un moteur de recherche entre autres. De cette manière, l’internaute peut trouver ce qu’il cherche en un coup d’œil sur la page. S’il doit commencer à tout lire pour trouver ce qu’il cherche, il va vite se lasser et quitter le site.

Les pictogrammes permettent également de faciliter et d’accélérer la recherche sur un site web. En effet, en voyant tel ou tel pictogramme sur une page web, en parcourant rapidement la page des yeux, l’internaute va savoir très rapidement où sont les choses qui peuvent l’intéresser.

Ces pictogrammes font appel à des habitudes. Par convention, vous saurez que derrière un pictogramme, il y a tel type de chose. Si vous êtes dans une station de métro et que vous voyez ça:

exit_picto

Vous saurez automatiquement que dans la direction du pictogramme, vous vous dirigez vers une sortie.

Si on revient sur un site web et que vous voyez ce pictogramme :

picto_enveloppe

Vous savez qu’en cliquant sur le lien, vous allez trouver quelque chose pour contacter l’auteur du blog ou l’entreprise derrière le site. Selon vos habitudes, vous vous attendez à trouver un formulaire de contact ou une adresse e-mail.

Ou si vous voyez ça par exemple:

search_icon

 

Vous savez que vous allez pouvoir lancer une recherche sur le site à cet endroit.

Dans ce tutoriel, nous allons voir comment ajouter des pictogrammes dans votre site WordPress. Pour ça, nous allons découvrir la bibliothèque Font Awesome.

 

Font Awesome

Font Awesome est une bibliothèque qui contient 7020 pictogrammes dans la version pro et 1535 pictogrammes dans la version gratuite. Allez faire un tour sur le site.

L’avantage de cette bibliothèque est qu’elle permet d’ajouter des petites images directement, en introduisant des balises HTML avec des classes spécifiques. Si par exemple, on veut:

wordpress_logo

Il suffit d’ajouter la balise HTML suivante: ‘<i class=”fab fa-wordpress”></i>’ et les pictogrammes de Font Awesome s’intègrent parfaitement dans le flux de votre contenu.

Comme ici, nous sommes intéressés par WordPress, nous allons voir comment intégrer cette bibliothèque sur un site WordPress via une extension et comment ajouter des pictogrammes dans le contenu de votre site.

 

Extension Font Awesome pour WordPress

L’extension Font Awesome permet d’installer rapidement et sans lignes de codes la bibliothèque Font Awesome. Pour l’installer c’est ici:

plugin_font_awesomeUne fois l‘extension installée, vous pouvez l’activer.

font_awesome_activate

Il y a rien d’autres à faire, nous pouvons commencer à implémenter des pictogrammes.

 

Intégrer Font Awesome dans la barre de navigation

Voici notre menu:

navbar_boutique

Nous voulons ajouter des pictogrammes pour guider plus facilement l’internaute sur le différents items de notre menu (et faire + joli par la même occasion).

Nous nous rendons sur le site de Font Awesome, et nous pouvons accéder aux différents pictogrammes via un moteur de recherche ou directement dans l’onglet ‘Icons’fontAwesomePour l’élément ‘Accueil’ de notre barre de navigation, nous allons choisir un petite maison en référence à ‘homepage’.

Donc nous pouvons insérer ‘home’ dans le moteur de recherche de Font Awesome.

fontAwesome_recherche

Cette petite maison m’intéresse et de toute façon, c’est la seule disponible avec la version gratuite de Font Awesome. Je clique dessus et j’arrive sur cette page. Actuellement pour ce que je veux faire, je vais utiliser la balise HTML ci-dessous qui contient la classe correspondante à notre pictogramme ‘home’.

home_icon_fontAwesomeIl suffit de copier cette balise en cliquant dessus.

Ensuite, nous nous rendons dans la partie ‘Menus’ de notre administration WordPress. Pour la gestion des menus, si vous n’êtes pas au point, je vous laisse découvrir ce tutoriel:

Comment créer un Menu WordPress et bien l’utiliser ?

Dans votre menu, vous collez la balise HTML dans le titre de la navigation de votre élément. N’oubliez pas de laisser un espace entre la balise et le titre. Vous enregistrez.

menu_wordpress

Cela donne ceci:

navbar

Si nous continuons le travail, nous pouvons arriver à ce résultat

navbar_avec_icon

Créer un menu réseaux sociaux

Pour mon menu ‘social’, je sélectionne ‘menu secondaire’. Les emplacements des menus dépendent du thème que vous avez sélectionné. Ici je suis sur Storefront. Dans mon menu ‘social’, je vais intégrer des liens personnalisés qui pointent vers des réseaux sociaux. Ici j’ai mis Facebook pour l’exemple et bien sûr dans le titre de la navigation, on met la balise HTML avec la classe correspondante.

creation_menuVoici en backend avec des liens vers Facebook, Twitter et Instagram

liens_personnalisés_reseaux_sociaux

et en front end:

social_links

et désormais le ‘header’ de mon thème Storefront:

header_storefront

Intégrer Font Awesome dans un widget

Pour cet autre exemple, nous voulons créer un petit widget qui affiche des liens à propos de l’auteur du blog.

Dans la section ‘Widgets’ de l’administration, on ajoute un widget de type texte dans la barre latérale par exemple (nous sommes toujours avec le thème Storefront).

widget_textet nous pouvons ouvrir les paramètres du lien et indiquer un premier élément comme ceci:

inserer_lien

et vous enregistrez le lien. Ensuite, vous allez dans l’onglet ‘Texte’ de l’éditeur de votre widget et vous ajoutez la balise HTML correspondante au pictogramme que vous voulez:

widget_texte

et si nous répétons l’opération plusieurs fois, nous obtenons par exemple ceci dans notre éditeur:

widget_textet en front end:

auteur_blogIntégrer Font Awesome dans le contenu d’une publication

Nous pouvons aussi directement intégrer un pictogramme dans le contenu d’une publication (page, post ou post type). Dans le bloc paragraphe, nous cliquons sur les options (trois petits points) comme ceci et nous choisissons ‘Modifier en HTML’

bloc_modifier_en_HTMLet nous insérons la balise HTML du pictogramme désiré à l’intérieur du paragraphe (balises ‘<p>’).

balise_fontAwesome_contenu_pageet en front end cela donne:

page_wordpressVoilà nous avons fait le tour de quelques possibilités d’intégration de la bibliothèque Font Awesome dans WordPress.
A vous maintenant de personnaliser vos sites WordPress avec des pictogrammes…

 

 

A propos de l'auteur...

Cyril BRON

Formateur média-vidéo dans une Haute Ecole à Genève et développeur web indépendant, j'utilise WordPress au quotidien. Je pratique beaucoup la veille technologique; j'aime découvrir, expérimenter et partager. Je me déplace souvent en Europe avec mon ordinateur, j'occupe mon temps entre exploration, prises de vue, traitement d’images et lignes de code...

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !