Comment ajouter la police Font Awesome à votre site WordPress ?

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!

Font Awesome WordPress
  • Simplicité
  • Technique
  • Design
  • Choix

Font Awesome WordPress

Nous vous recommandons d'utiliser le plugin Officiel ou de simplement mettre le code dans votre thème.

4.8
Partager sur facebook
Facebook
Partager sur whatsapp
WhatsApp
Partager sur linkedin
LinkedIn
Partager sur twitter
Twitter

Allez plus loins

8 réponses

  1. Bonjour,

    Merci pour cet article, une petit coquille au point 3, on est censé utiliser FontAwesome en local, mais dans le wp_enqueue_style on va quand même sur //maxcdn.bootstrapcdn.com, un copier/coller malencontreux comme on dit !

    Scargoll.

  2. Merci pour cette solution ! j’avais un soucis d’affichage d’awesome font icon sur une des deux URL qui pointent vers mon site, en utilisant la méthode 3 et en remplacant ‘/le-repertoire-de-votre-choix/font-awesome/4.3.0/css/font-awesome.min.css’ par « https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css » tous fonctionne nikel !

  3. Bonjour,

    Merci pour votre article, j’ai pu ainsi découvrir les autres manières d’intégrer Font Awesome à son site ! J’ai utilisé la 1ère méthode car je la trouve plus rapide à utiliser pour un débutant en dév.

    J’aurai une question : en ayant utilisé la 1ère méthode, comment faire pour changer le style d’un élément ? Par exemple l’icône d’un réseau sociaux ?
    Merci d’avance !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

👋 Hello,

Bienvenue sur BlogInfos.com !

Vous êtes à un seul clic de découvrir des centaines d’articles concernant WordPress, Elegant Themes ou encore Elementor et tout cela gratuitement !

-25% de réduction

👋 Le site ElegantThemes.com propose une réduction de 25% et elle ne sera disponible que pendant quelques temps. Ne manquez pas ça !

En cliquant sur le lien « Accéder Maintenant » vous acceptez d’aider ce site et d’être redirigé vers notre partenaire ElegantThemes.