Vous voulez ajouter des icônes Font Awesome à WordPress ?

Les icônes Font Awesome sont impressionnant (sic !) parce que, contrairement images régulières:

  • Vous pouvez les redimensionner sans perte de qualité car ce sont des vecteurs.
  • Ils sont super faciles à personnaliser – vous pouvez modifier les tailles, ajouter une animation, ajouter une bordure et bien plus encore.

En ce moment, Font Awesome inclut plus de 2 986 icônes différentes. Et je vais te montrer 3 façons de commencer à les utiliser sur votre site WordPress.

Tout d’abord, vous apprendrez une méthode manuelle simple que vous pouvez utiliser pour ajouter Font Awesome.

Ensuite, vous apprendrez comment vous pouvez utiliser 2 plugins différents pour accomplir à peu près la même chose.

Si vous savez absolument que vous voulez utiliser un plugin, cliquez ici pour passer directement à cette section. Sinon, commençons par la méthode manuelle !

Comment ajouter manuellement des icônes Font Awesome à WordPress

Pour ajouter manuellement des icônes Font Awesome à WordPress, il vous suffit de mettre en file d’attente une feuille de style dans votre thème WordPress. Cela semble compliqué, non ? Non – ne vous inquiétez pas. C’est super facile – je vais vous montrer.

Le seul inconvénient de cette méthode est que vous devrez mettre à jour manuellement l’URL de la feuille de style si vous souhaitez toujours utiliser la dernière version de Font Awesome.

Comment mettre en file d’attente la feuille de style Font Awesome sur WordPress

Pour mettre en file d’attente la feuille de style Font Awesome, il vous suffit d’ajouter un court extrait de code au thème de votre enfant. fonctions.php dossier ou via un plugin comme le plug-in gratuit d’extraits de code.

Je recommande toujours aux gens d’utiliser le plugin Code Snippets pour gérer fonctions.php, c’est donc ce que je vais faire pour ce tutoriel. Mais c’est totalement bien pour l’ajouter directement au fichier functions.php de votre thème tant que comme tu es utiliser un thème enfant.

Voici l’extrait que vous devez ajouter :

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v5.0.13/css/all.css' );
}

Il y a une mise en garde – voir la partie URL ? C’est-à-dire – https://use.fontawesome.com/releases/v5.0.13/css/all.css.

Ceci est la version actuelle de Font Awesome au moment où j’écris ce post. Mais puisque vous lirez probablement cet article à l’avenir, vous devriez allez à Font Awesome et obtenez le dernier lien.

Bien que vous puissiez télécharger Font Awesome et l’héberger vous-même via cette même URL, il est plus facile pour la plupart des gens d’utiliser simplement le CDN gratuit.

Pour ajouter ce code avec le plugin Code Snippets, rendez-vous sur Extraits → Ajouter nouveau et collez-le dans:

feuille de style géniale de police

Assurez-vous de cliquer Enregistrer les modifications et activer en bas pour activer l’extrait de code.

Et c’est tout! Vous venez d’ajouter Font Awesome à WordPress.

Comment utiliser les icônes Font Awesome dans votre contenu

Maintenant que vous avez mis la feuille de style en file d’attente, vous êtes prêt à commencer à utiliser des icônes dans votre contenu.

Pour faire ça:

  • Allez à la Site Web de Font Awesome et utilisez le champ de recherche pour trouver l’icône que vous souhaitez utiliser

sélectionnez l'icône géniale de la police

  • Sur la page qui se charge, copiez l’extrait de code sous l’icône

code d'icône

  • Ajoutez cet extrait de code à l’endroit de votre site WordPress où vous souhaitez utiliser l’icône. Assurez-vous d’utiliser le Texte tab si vous utilisez l’éditeur WordPress.

comment ajouter des icônes Font Awesome à WordPress

Et juste comme ça, vous devriez avoir votre icône :

exemple de police génial

Cette icône est si petite, cependant! Réparons ça…

Comment agrandir les icônes Font Awesome (ou les modifier d’une autre manière)

Pour manipuler les icônes Font Awesome, il vous suffit d’ajouter quelques paramètres supplémentaires au code d’icône que vous avez ajouté dans l’éditeur WordPress.

Pour ajuster les tailles, vous pouvez utiliser des paramètres tels que :

  • fa-xs – très petit (.75 ​​em)
  • fa-2x – double la taille (2 em)
  • fa-3x – triple la taille (3 em)
  • Etc.

Vous pouvez aller jusqu’au fa-10x si vous voulez le rendre vraiment grand !

Voici donc le code que vous utiliseriez pour tripler l’icône de l’exemple précédent :

<i class="fab fa-wordpress-simple fa-3x"></i>

rendre plus grand

Et maintenant c’est beaucoup plus gros :

plus grand exemple

Cool, non ?

Vous pouvez utiliser d’autres modificateurs pour faire des choses comme ajouter des bordures, animer vos icônes, changer les angles, et plus encore ! Lisez tout à leur sujet ici.

Alors voilà, il n’est pas trop difficile d’ajouter manuellement Font Awesome à WordPress. Mais si vous cherchez un moyen encore plus simple, voici deux excellentes options de plug-in.

2 plugins pour vous aider à ajouter des icônes Font Awesome à WordPress

Meilleure police géniale

Better Font Awesome fait exactement ce que je vous ai montré dans la section du manuel. Et il vous donne également des codes abrégés et une interface graphique pour insérer des icônes Font Awesome pendant que vous êtes dans l’éditeur WordPress, ce qui est un gros avantage si vous n’aimez pas devoir travailler directement avec du code.

Pour commencer, installer et activer le plugin. Ensuite, vous pouvez pratiquement commencer à utiliser des icônes tout de suite.

Vous obtiendrez un nouveau Insérer une icône bouton dans l’éditeur WordPress :

meilleure police

Lorsque vous cliquez dessus, une interface s’ouvre dans laquelle vous pouvez rechercher dans toute la bibliothèque Font Awesome et insérer facilement des icônes :

insérer l'icône

Lorsque vous sélectionnez une icône, le plugin ajoutera un shortcode à l’éditeur :

Pour modifier la taille de l’icône ou la manipuler d’une autre manière, il vous suffit d’ajouter les mêmes courts extraits de la section du manuel de ce guide à la classer

Lire la suite : cliquez ici

Dans la même catégorie :