Comment ajouter des icônes Font Awesome à WordPress – Le guide complet

C'est de cela qu'il s'agit dans ce guide. Lorsque vous aurez fini de lire, vous saurez exactement comment :

• Ajouter manuellement la feuille de style Font Awesome à WordPress
• Ajoutez Font Awesome à WordPress avec un plugin gratuit
• Insérez et stylisez les icônes Font Awesome de différentes manières

Creusons…

Pourquoi devriez-vous prendre le temps d'ajouter des icônes Font Awesome à WordPress

Les icônes Font Awesome sont géniales car, comme leur nom l'indique, il s'agit d'une police d'icônes plutôt que d'images. Cela signifie que vous pouvez faire des choses sympas comme :

• Redimensionnez sans perdre en qualité car les icônes sont des vecteurs
• Changer les couleurs, ajouter une animation et utiliser d'autres manipulations CSS

Tout cela pour dire que les icônes Font Awesome sont de loin supérieures à la simple utilisation d'une image statique.

Tout d'abord, je vais vous montrer deux façons différentes de les ajouter à votre site. Ensuite, je vais vous montrer comment vous pouvez styliser et manipuler vos icônes (quelle que soit la méthode que vous choisissez).

Comment ajouter manuellement des icônes Font Awesome à WordPress

Si l'idée de creuser dans le code de votre thème vous effraie, je vous recommande de passer à la section suivante où je vous montrerai comment ajouter des icônes Font Awesome à WordPress à l'aide d'un plugin gratuit.

Sinon, j'aime cette méthode pour un moyen agréable et léger de faire fonctionner Font Awesome.

Fondamentalement, tout ce que vous avez à faire est d'ajouter la feuille de style Font Awesome à votre thème WordPress. Ensuite, vous pouvez commencer à insérer des icônes Font Awesome et les styliser comme vous le souhaitez.

Voici comment fonctionne l'ensemble du processus, étape par étape :

Étape 1 : Mettre en file d'attente la feuille de style Font Awesome dans votre thème WordPress

Comme je l'ai dit, votre première étape consiste à ajouter la feuille de style CSS Font Awesome à votre thème WordPress. Bien que vous puissiez l'obtenir directement sur le site Web de Font Awesome, ma méthode préférée consiste à utiliser la version hébergée sur Bootstrap CDN.

Actuellement, ce lien est :

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Mais cela changera à mesure que Font Awesome publiera de nouvelles versions. C'est donc une bonne idée de mettre à jour semi-régulièrement le lien vers la dernière version (bien que les anciennes versions continuent de fonctionner).

Pour ajouter cette feuille de style à WordPress, vous devez la mettre en file d' attente dans le fichier functions.php de votre thème enfant . Bien que la méthode de base pour ajouter du CSS consiste à placer le lien dans votre en-tête, il est recommandé d'utiliser la fonction spéciale de mise en file d'attente de WordPress au lieu de placer la feuille de style directement dans votre en-tête.

De plus, l'utilisation d'un thème enfant garantit que vos modifications ne seront pas écrasées si vous avez besoin de mettre à jour votre thème.

Parce que suivre les meilleures pratiques de code WordPress est une bonne chose, je vous recommande vivement d'utiliser à la fois un thème enfant et la fonction de mise en file d'attente.

Bon, voici comment faire :

Allez dans Apparence → Éditeur et sélectionnez le fichier functions.php pour votre thème enfant.

Ensuite, collez ce code :

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Assurez-vous d'enregistrer vos modifications et vous avez terminé ! Pas trop douloureux, non ?

Étape 2 : Insérer les icônes Font Awesome

Une fois que vous avez mis la feuille de style en file d'attente, vous pouvez insérer des icônes Font Awesome dans votre site en accédant à la recherche d'icônes Font Awesome et en trouvant une icône que vous souhaitez insérer :

Lorsque vous cliquez sur une icône, Font Awesome vous donne le code dont vous avez besoin pour utiliser l'icône :

Tout ce que vous avez à faire est de placer ce code dans l'onglet Texte de l'éditeur WordPress pour ajouter une icône à votre site.

Et c'est tout! Vous avez ajouté avec succès la prise en charge de Font Awesome à WordPress. Maintenant, il ne reste plus qu'à apprendre à styliser les icônes Font Awesome sur votre site WordPress.

Mais avant de vous montrer cela, je souhaite passer en revue la méthode du plugin pour ajouter le support Font Awesome. N'hésitez pas à ignorer si vous avez opté pour la méthode manuelle plutôt que pour la méthode du plugin.

Comment ajouter des icônes Font Awesome à WordPress avec un plugin

Si vous préférez utiliser un plugin au lieu de mettre manuellement en file d'attente la feuille de style Font Awesome, il existe une solide option gratuite répertoriée sur WordPress.org appelée Better Font Awesome.

En plus de toujours ajouter la dernière feuille de style à votre site, Better Font Awesome :

• Vous permet d'utiliser des codes abrégés pour intégrer des icônes Font Awesome.
• Vous donne un menu déroulant dans l'éditeur TinyMCE pour insérer des icônes.

Si vous prévoyez d'utiliser régulièrement les icônes Font Awesome, ces deux outils pourraient vous faciliter la vie. Mais pour une utilisation peu fréquente, je pense que la méthode manuelle est l'option la plus simple car c'est la plus légère.

Étape 1 : Installer et activer le plugin

Pour ajouter Font Awesome, il vous suffit d'installer et d'activer le plugin. Il n'y a vraiment rien d'autre.

Bien qu'il existe un panneau de paramètres de base auquel vous pouvez accéder en allant dans Paramètres → Better Font Awesome , vous êtes totalement libre de tout laisser par défaut.

Étape 2 : Insérer les icônes Font Awesome

Pour insérer des icônes Font Awesome avec le plugin, vous avez deux options différentes :

• Utilisez le code du site Web de Font Awesome comme je l'ai démontré dans la section précédente.
• Utilisez des shortcodes, qui peuvent être générés à partir d'un menu déroulant.

Parce que je vous ai déjà montré la première méthode dans la section précédente, je vais juste vous donner un aperçu rapide du générateur de shortcode déroulant.

Lorsque vous allez créer un nouveau message ou une nouvelle page, vous remarquerez un nouveau bouton Insérer une icône à côté du bouton Ajouter un média . Si vous cliquez dessus, vous verrez toutes les icônes Font Awesome disponibles, ainsi qu'une option pour filtrer les résultats :

Tout ce que vous avez à faire est de cliquer sur l'icône de votre choix et le plugin insérera le bon shortcode :

Et c'est tout ce qu'il y a à faire !

Maintenant que vous avez la prise en charge des icônes Font Awesome, examinons comment vous pouvez styliser et manipuler vos icônes Font Awesome.

Comment styliser les icônes Font Awesome et changer les tailles

Quelle que soit la méthode que vous avez utilisée pour ajouter Font Awesome à WordPress, vous utiliserez les mêmes principes de base pour styliser vos icônes.

De plus, ces commandes fonctionnent que vous utilisiez des codes abrégés ou le code d'intégration du site de Font Awesome.

La plupart de ces conseils sont tirés directement de la page d'exemples Font Awesome, vous n'avez donc pas à vous soucier de la compatibilité.

Modifier la taille des icônes Font Awesome

Commençons par une base - augmenter la taille de vos icônes Font Awesome. Par défaut, les icônes sont assez petites, c'est donc certainement une situation que vous êtes susceptible de rencontrer.

Pour augmenter la taille d'une icône, vous pouvez utiliser l'un de ces modificateurs :

• fa-lg - augmente la taille de 33%
• fa-2x – double la taille
• fa-3x – taille triple
• fa-4x – …
• fa-5x – …

Pour utiliser ces modificateurs, il vous suffit de l'ajouter après le nom de l'icône (mais à l'intérieur des guillemets) pour le code, et à l'intérieur des guillemets de classe pour le shortcode. Voici un exemple de triplement de la taille d'une icône pour les deux méthodes d'intégration :

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [icon name="download" class=" fa-3x "]

Par exemple, ceci :

Devient ceci sur le front-end :

Faire pivoter les icônes impressionnantes de police

Vous pouvez également facilement faire pivoter les icônes Font Awesome pour changer leur orientation.

Voici les modificateurs de rotation. Vous pouvez utiliser n'importe lequel d'entre eux exactement de la même manière que les modificateurs de taille ci-dessus :

• fa-rotate-90 – tourne à 90 degrés
• fa-rotate-180 – tourne à 180 degrés
• fa-rotate-270 – tourne à 270 degrés
• fa-flip-horizontal - retourne l'icône le long de son axe horizontal
• fa-flip-vertical - retourne l'icône le long de son axe vertical

Ajouter une animation aux icônes Font Awesome

Vous pouvez également ajouter des animations de base à vos icônes. Font Awesome vous propose deux modificateurs différents pour ajouter des rotations :

• fa-spin – ajoute une rotation douce
• fa-pulse - fait tourner l'icône en 8 étapes différentes

Ces animations sont mieux associées à des icônes circulaires. Si vous utilisez d'autres icônes de forme étrange, l'effet peut sembler un peu bizarre.

Changer la couleur de l'icône de la police Awesome

Enfin, je vais vous montrer comment changer la couleur des icônes de Font Awesome. Malheureusement, il n'y a pas de modificateurs intégrés pour cela. Au lieu de cela, vous devrez utiliser du CSS personnalisé.

Ne vous inquiétez pas, c'est super simple.

Tout ce dont vous avez besoin est ce petit code :

.fa-NAME {
color: COLOR;
}

Où fa-NAME est le nom réel de votre icône et COLOR est la couleur que vous souhaitez changer.

Pour conserver l'icône de téléchargement de nos exemples précédents, voici comment la rendre rouge :

Vous pouvez facilement ajouter du CSS personnalisé en allant dans Apparence → Personnalisateur → CSS supplémentaire .

Conclure les choses

La configuration des icônes Font Awesome peut prendre quelques minutes. Mais une fois que vous les avez installés, ils sont là pour de bon. À partir de là, tout ce que vous avez à faire pour insérer et styliser les icônes Font Awesome individuelles est de suivre les étapes ci-dessus.

Sachez simplement que si vous utilisez la méthode manuelle, vous voudrez périodiquement entrer et mettre à jour le lien vers la feuille de style pour rester au courant des dernières versions.