Comment utiliser Font Awesome sur ton site WordPress

Quand tu as le choix entre utiliser une icône vectorisée ou une simple image, c’est une bonne idée de prendre la version vectorisée. Les icônes vectorisées sont plus légères et plus rapides à charger, et elles peuvent prendre toutes les tailles sans perdre en résolution. Font Awesome est une magnifique bibliothèque d’icônes vectorielles que tu peux utiliser pour ton site internet. Ils proposent toutes les formes et même des logos de marque dont tu as besoin. Le petit plus ? C’est gratuit ! Et en plus c’est vraiment très simple à utiliser. Je vais te montrer comment l’intégrer à ton site WordPress.

Présentation de Font Awesome

Utiliser Font Awesome sur ton site WordPress est très facile. En suivant les instructions de cet article, tu seras capable d’intégrer de belles icônes à ton thème, d’avoir un design soigné et responsive et surtout de diminuer le temps de chargement de tes pages.

Une chose à retenir c’est que les icônes Font Awesome seront intégrées à ton site comme une police, une typographie (font en anglais), d’où le nom de Font Awesome. Comme avec n’importe quelle typographie, tu auras la possibilité de modifier les icônes en taille, couleur, grasse, en utilisant du code CSS via @font-face et font-family.

L’avantage c’est que tu n’as plus à te préoccuper de la taille ou de l’espace de l’icône suivant le navigateur ou la taille de l’écran. Comme une police, elle s’adaptera à chaque support. Ça parait génial ? Ça l’est en effet. Maintenant voyons comment faire :

Installation de Font Awesome

Il y a deux façons d’installer Font Awesome, soit manuellement (fonctionne avec tout site web), soit par un plugin WordPress. L’équipe de Font Awesome a développé un plugin pour faciliter l’utilisation de ses icônes sur les sites WordPress.

Installe le plugin, en le téléchargeant ou directement dans WordPress en ajoutant un plugin, et active-le. Tu as maintenant accès au shortcode [[icon name]] et au snippets HTML. Il ne te reste plus qu’à rechercher, parmi plus de 1500 icônes gratuites, celles dont tu as besoin. Tu trouveras dans les paramètres du plugin la configuration par défaut, en général elle convient à la majorité des sites web. Tu n’as rien à modifier pour utiliser immédiatement les icônes.

Une option est intéressante, c’est Method. Tu as le choix entre Webfont ou SVG. Avec l’option SVG, le CDN de Font Awesome enverra les icônes comme des fichiers SVG et non pas comme une typographie. Même si le SVG a beaucoup d’avantages il n’est malheureusement pas encore reconnu par tous les navigateurs, et WordPress aussi a quelques fois des difficultés avec les images SVG. Je te conseille de commencer avec l’option Webfont qui est plus stable

Pour utiliser une icône Font Awesome dans ton site web rien de plus simple : il te suffit d’ajouter <i class=”fab fa-wordpress”></i> là où tu veux voir apparaître une icône. Il te faut bien sûr remplacer fa-wordpress par l’icône de ton choix en trouvant son nom dans la librairie Font Awesome.

Ça y est ? Tu as essayé ? Le plugin de Font Awesome pour WordPress est très pratique pour ceux qui ne veulent pas toucher au code de leur thème. Mais peut-être que tu es à l’aise pour modifier le code de tes fichiers WordPress ou que tu veux savoir comment Font Awesome fonctionne. Je vais maintenant te montrer la méthode manuelle pour avoir de belles icônes.

Installation manuelle de Font Awesome

Il te faut d’abord aller sur le site de Font Awesome et cliquer sur le bouton Start for Free. Après avoir créé ton compte tu as accès à plus de 1500 icônes. Il faut créer un Font Awesome Kit, ce qui va gérer un code qu’il faudra intégrer à ton site web, oui tu as bien compris : un simple copier/coller. Attention de bien vérifier que l’option Webfont est sélectionnée, comme expliqué plus haut.

La plupart des thèmes WordPress ont dans leurs paramètres la possibilité d’insérer du code automatiquement dans la balise <head> du site. Moi j’utilise Divi, si tu es dans le même cas, il faut aller dans Theme Options – Integrations et coller le code fourni par Font Awesome (exemple ci-dessous) dans la partie Add code to the Head of your blog.

<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>

Après avoir sauvegarder tu peux utiliser les icônes que tu veux sur ton site web. La seule différence avec le plugin c’est qu’avec cette méthode manuelle tu n’as pas accès au shortcode, penses-y.

Si ton thème ne propose pas l’insertion automatique de code

Il se peut que ton thème n’est pas d’option pour pouvoir insérer du code dans la balise <head>. Pas de soucis, je vais t’expliquer comment le faire manuellement. Il va falloir modifier le fichier header.php de ton thème. Pour cela il y a deux façons de faire. La première est de modifier le fichier directement à partir de WordPress (mais tu sais que ce n’est pas très secure). Il faut aller dans le menu Apparence – Éditeur de thème et trouver le fichier header.php dans la liste des fichiers du thème, habituellement il se trouve à la racine du thème.

Dans le fichier header.php il te faut trouver la ligne </head>, et juste avant cette ligne tu peux coller le code Font Awesome. Il ne reste plus qu’à cliquer sur le bouton Mettre à jour le fichier et voilà tu peux utiliser les icônes Font Awesome.

Petit rappel, si on modifie les fichiers d’un thème alors il faut utiliser un thème enfant. Ainsi nos modifications ne seront pas effacées lors de la prochaine mise à jour du thème principal. Si tu utilises un thème enfant, il se peut que le fichier header.php n’apparaisse pas dans la liste des fichiers. Il te faudra alors copier le header.php du thème principal dans ton thème enfant et le modifier.

L’autre façon de modifier le fichier header.php, si tu as bloqué la modification des fichiers du thème depuis WordPress, et de te connecter par FTP à ton serveur, naviguer jusqu’au répertoire de ton thème enfant (si tu ne l’as pas encore créé c’est le moment) et de modifier le fichier.

Styliser les icônes Font Awesome

Maintenant que Font Awesome est installé sur ton site, il est temps de faire apparaître de belles icônes. Pour changer le style des icônes il suffit d’utiliser du CSS car les icônes sont définies par une classe CSS. Les deux styles les plus utilisés sont la couleur et la taille, mais tu peux aussi faire tourner une icône, l’animer ou ajouter du texte. Tu peux inclure ton code CSS dans un fichier ou bien directement dans le code de l’icône. Généralement on ne trouve pas des icônes sur toutes les pages d’un site, il est donc plus simple d’inclure le style CSS au code de l’icône en question.

Le site Font Awesome propose de nombreuses classes CSS pour modifier facilement le style de tes icônes, notamment avec des classes de tailles pré-définies comme fa-xl ou fa-2x. Tu peux avoir besoin que la taille de l’icône soit proportionnelle à une taille spécifique et dans ce cas la valeur absolue ne fonctionne pas, il te suffit de placer l’icône dans une balise <div> avec son style et le tour est joué.

<divstyle="font-size: 0.5rem;">
<iclass="fas fa-igloo fa-10x"></i>
</div>

C’est terminé !

Et oui c’est tout. Que ce soit en installant le plugin WordPress de Font Awesome ou en insérant le code manuellement, il est très facile de rajouter des icônes qui seront responsive et plus légères que des images. Voilà pourquoi Font Awesome est très populaire, alors n’hésites pas à l’utiliser.

Ça peut t’intéresser

Aucun résultat

La page demandée est introuvable. Essayez d'affiner votre recherche ou utilisez le panneau de navigation ci-dessus pour localiser l'article.

0 commentaires