Avez vous déjà vu des icônes évolutives comme celles-ci au sein d’articles WordPress ou autres, et avez espéré trouver comment faire de même sur votre site ?
Ne cherchez plus! La police de caractères Font Awesome vous permet d’ajouter des icônes évolutives à votre site Web. Je l’utilise parfois sur ce site, car les icônes ajoutent une belle touche personnelle. C’est gratuit, sous licence GPL, et peut même être utilisé commercialement.
Dans cet article, je vais vous présenter plusieurs méthodes sur la façon d’ajouter Font Awesome à votre site WordPress.
Mettez du Font Awesome dans votre WordPress !
4 Méthodes pour ajouter Font Awesome à WordPress
La raison pour laquelle j’ai inclus plusieurs méthodes est que vous, lecteurs, avez peut-être des préférences de mise en œuvre pour les nouveautés ajoutées à votre site Web.
Méthode # 1 – Insérer un lien
Chez Font Awesome, ils ont eu une idée intéressante sur la façon de mettre en œuvre la police de caractères en passant par leur CDN. Cela signifie que vous leur permettez d’héberger les fichiers, et vous avez simplement besoin d’inclure une ligne de code dans votre site afin que les polices fonctionnent.
Cette méthode est simple et ne vous oblige qu’à ajouter la ligne suivante dans la section d’en-tête de votre site, entre les balises <head></head>.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
Méthode # 2 – Ajouter du code
Ajoutez le code suivant dans le fichier functions.php de votre thème.
//* Enqueue Font Awesome
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );
function yourtheme_enqueue_scripts() {
wp_enqueue_style( 'font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css' );
}
Attention: Si vous avez choisi d’utiliser Font Awesome depuis leur CDN, Choisissez une des méthodes énumérées ci-dessus, pas les deux.
Méthode # 3 – Télécharger et Ajouter du code
1. Téléchargez Font Awesome – https://fontawesome.com
2. Décompressez le fichier sur le bureau de Windows ou un dossier de votre ordinateur.
3. Téléchargez dossiers et fichiers dans un répertoire de votre compte d’hébergement WordPress. Vous pouvez par exemple créer un dossier « /fonts » et y charger les fichiers.
4. Ajouter le code suivant au fichier « functions.php » de votre thème.
//* Enqueue Font Awesome
add_action( 'wp_enqueue_scripts', 'yourtheme_enqueue_scripts' );
function yourtheme_enqueue_scripts() {
wp_enqueue_style( 'font-awesome', '/le-repertoire-de-votre-choix/font-awesome/version/css/font-awesome.min.css' );
}
Méthode # 4 – Installer le Plugin WordPress
Il existe plusieurs plugin disponibles pour vous permettre d’utiliser Font Awesome sur votre site, mais le plugin officiel est actuellement le plus performant. Tout ce que vous avez à faire est d’installer le plugin, l’activer, et utiliser les shortcodes.
Il existe quelques autres méthodes, sur la page Get Started, qui utilisent LESS Ruby Gem, SASS Ruby Gem, Custom LESS ou SASS. Je mentionne ces méthodes au cas où des développeurs liraient cet article et préféreraient cette façon de faire.
Si vous avez opté pour une des trois premières méthodes, une fois les fichiers de Font Awesome mis en place, vous pouvez utiliser le code de l’un quelconque des 519 icônes vectorielles évolutives disponibles.
Si par exemple, avec l’une des trois premières méthodes, vous souhaitez utiliser une icône comme la bouée de sauvetage, qui est généralement utilisée pour symboliser «l’aide», et qui ressemble à , utilisez simplement le code:
<i class="fa fa-life-ring"></i>
Vous pouvez également augmenter la taille en utilisant les exemples proposés, changer la couleur en utilisant le CSS, et bien plus encore.
Avez-vous déjà utilisé la police Font Awesome ? Si oui, quelle méthode avez-vous mise en place pour votre propre site ?
Vous avez aimé cet article, alors partagez le, Merci!
Publié à l'origine le : 7 septembre 2019 @ 21 h 01 min
