Les gens sont naturellement attirés par l’aspect visuels d’un site Web de WordPress, autant qu’ils sont attirés par le contenu écrit que vous partagez. En fait, selon « Jeff Bullas », les articles avec des images ont 94% de plus de vues que les articles sans images.

C’est une énorme augmentation des pages vues si vous voulez mon avis.

Et quel en est la raison exactement ?

Il suffit d’ajouter quelques images de haute qualité et adaptées à l’article dans tout votre contenu.

Mais qu’en est-il des images sur votre site Web qui vont au-delà de la capture d’écran et des photographies ? Qu’en est-il des images qui attirent non seulement l’attention, mais aussi une fonction utile ?

Oui, je parle d’icônes. Vous savez, ces minuscules images qui se trouvent diffusées sur des sites Web dans le but d’encourager le partage sur les réseaux sociaux, pour illustrer les pages de contact des propriétaires d’entreprises, pour n’en nommer que quelques-uns des cas d’utilisation.

Comme l’idée a été prise sur ce site, les visiteurs n’étaient pas seulement attirés par les images sur les sites Web, mais étaient enclins à interagir avec celles-ci, les gens ont commencé à les ajouter à leurs sites Web.

Pourtant, étant donné que la technologie avance, comme toujours, les icônes d’images traditionnelles ont commencé à faiblir en tant que solution d’image pour les sites Web. C’est parce qu’elles rendent les pages beaucoup plus lourdes et donc lentes, mais surtout cette solution n’était pas toujours adaptée aux mobiles.

Mais il y a une solution: les polices icônes.

Aujourd’hui, je vais vous dire en quoi consistent les polices d’icônes et les avantages qu’il y a à leur utilisation sur votre site WordPress. De plus, je vais vous montrer comment ajouter des polices d’icône sur votre site WordPress à l’aide du populaire plugin « Better Font Awesome ».

Alors, commençons.

C’est quoi les polices d’icônes et pourquoi les utiliser?

Les polices d’icônes sont exactement ce qu’elles disent : des polices intégrées entièrement aux icônes. En fait, les polices icônes ou « font-icon » peuvent être décrites comme une police qui affiche uniquement des caractères ou des symboles, et non les lettres et les chiffres auxquels sont associés les polices et textes traditionnel s.

Polices icônes wordpressLes polices d’icônes sont utilisées pour afficher les symboles couramment utilisés sur votre site. Par exemple, les boutons des médias sociaux, votre panier, les boutons de téléchargement et les boutons de navigation sont des exemples d’icônes qui affichent des images minuscules et interactives sur votre site.

Fonticone sur un site web

Pourquoi utiliser les polices d’icônes?

Les icônes d’images ont bien fonctionnés dans le passé pour de nombreux propriétaires de sites. Cependant, au fur et à mesure que les règles de navigation, la convivialité et la conception ont évolué, les polices d’icône sont devenues la meilleure solution pour afficher des images interactives sur un site web.

Voici un aperçu de certaines raisons convaincantes pour lesquelles les polices d’icônes sont le meilleur choix:

  • Extensible facilement sans perdre en qualité
  • Personnalisable en termes de couleur et d’ombre
  • 100% responsive
  • Fonctionne comme des sprites d’image CSS, mais se comporte comme un texte
  • Facile à utiliser
  • Compatible avec les navigateurs
  • Personnaliser l’opacité, la rotation et plus encore
  • Taille du fichier plus petite
  • Ne sacrifie pas la vitesse ou les performances de votre site Web

Comme vous pouvez le voir, il existe plusieurs raisons pour lesquelles vous voudrez peut-être utiliser une police d’icône sur votre site Web par opposition à une icône d’image.

Installation d’icônes de police sur votre site en utilisant un plugin

Better Font Awesome est un plugin WordPress gratuit qui vous permet d’intégrer automatiquement la dernière version de Font Awesome dans votre projet WordPress. De plus, il est fourni avec des CSS, des codes courts et un générateur de code court TinyMCE.

Ce plugin possède une variété de fonctionnalités utiles pour les propriétaires de sites:

  • Mise à jour de routine de la dernière version
  • Possibilité de basculer entre les versions de Font Awesome sans modifier les codes courts
  • Prise en charge d’autres plugins de police populaires, y compris leurs codes courts
  • Délivré par jsDelivr CDN

Étape 1: Installation et activation de Better Font Awesome

Pour commencer, installez et activez le plugin « Better Font Awesome » via votre tableau de bord WordPress comme vous le feriez avec n’importe quel autre plugin.

Tout d’abord, naviguez vers « Plugins > Ajouter nouveau » et recherchez « Better Font Awesome ».

Better font awesome plugin install and activate

Ensuite, sélectionnez « Installer maintenant », puis cliquez sur « Activer ».

Une fois activé, le plugin ajoute un lien «Better Font Awesome» sous le menu Paramètres de votre tableau de bord WordPress.

Better font awesome plugin new menu item

Étape 2: Configurer les paramètres du plugin

Pour configurer le plugin « Better Font Awesome », commencez par cliquer sur l’élément du menu « Better Font Awesome » sous Réglages. Une fois que vous faites cela, vous verrez un écran similaire à ceci:

Better font awesome plugin configuration settingsIci vous pouvez faire ce qui suit:

  • Version: Sélectionnez la version de « Better Font Awesome » que vous souhaitez utiliser.
  • Utilisez CSS minifié: cochez cette case si vous souhaitez utiliser la version minifiée du CSS.
  • Supprimez la police d’impression existante: sélectionnez cette case pour tenter d’enlever les extraits codés et les shortcodes ajoutés par d’autres plugins et thèmes.
  • Masquer les avis d’administrateur: Cacher les avertissements d’administration par défaut qui s’affichent lorsque des erreurs d’API et de CDN se produisent.

En plus de la quantité minimale des options de Better Font Awesome, il y a une petite section « Utilisation » expliquant comment ajouter des icônes à votre site.

Utilisation du plugin better font awesome

Étape 3: Ajout d’icônes à votre site Web

Il existe trois façons simples d’ajouter des icônes à votre site Web en utilisant « Better Font Awesome » – via un shortcode, HTML ou TinyMCE.

#1. Ajout d’icônes à l’aide de shortcode

Pour ajouter des icônes à votre site Web à l’aide d’un shortcode, visitez d’abord le site Web de « Font Awesome » pour voir une liste complète des icônes disponibles qui peuvent être utilisées.

Ici, vous pouvez rechercher l’icône souhaitée. Par exemple, si vous voulez une icône « email », recherchez simplement ce mot-clé et sélectionnez l’icône que vous souhaitez utiliser en cliquant dessus.

Rechercher une icone sur fontawesomeAprès avoir cliqué sur l’icône que vous souhaitez ajouter, vous verrez un écran montrant l’image de l’icône avec ses différentes tailles et un petit bloc de code:

Font icone avec toutes ses taillesIl suffit de copier le bloc de code et de le coller n’importe où sur votre site Web à l’aide de l’onglet « Éditeur de texte ». Voici ce à quoi ressemblera l’éditeur sur votre site Web:

Editeur de code avec des icônes sur wordpressEditeur de code avec des icônes sur wordpressÀ la fin, voici ce que les visiteurs du site verront quand ils accèderont à votre site :

Résultat daffiche dicone sur wordpress
# 2. Ajout d’icônes à l’aide d’un code HTML

Comme on l’a vu dans la section « Utilisation », vous avez la possibilité d’utiliser le code HTML pour insérer des icônes sur votre site Web. Cependant, les développeurs de plugins prennent en compte que l’utilisation de HTML nécessite des préfixes spécifiques à la version.

C’est pourquoi ils vous recommandent d’utiliser des shortcode à la place. Toutefois, si vous souhaitez utiliser le code HTML, Font Awesome a des informations utiles ici.

# 3. Ajout d’icônes à l’aide de TinyMCE

C’est probablement le moyen le plus simple d’ajouter des icônes à votre site. Dans le mode « Editeur Visuel », cliquez simplement sur  Insérer l’icône. À partir de là, faites défiler les options d’icône disponibles ou réduisez vos résultats à l’aide de la fonction de recherche.

Bouton de recherche des icône éditeur visuel wordpress

Une fois que vous trouvez l’icône que vous voulez, cliquez simplement dessus. Le générateur de shortcode saisit automatiquement les informations requises dans votre publication ou votre page.

Si vous souhaitez apprendre à personnaliser les icônes de votre site, reportez-vous aux exemples de « Font Awesome ».