WordPress

Comment ajouter la police Font Awesome à votre site WordPress

3 avril 2015

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 site WordPress!

Ajouter Font Awesome à WordPress

4 Méthodes pour ajouter Font Awesome à votre site 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="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.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', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}

Attention: Si vous avez choisi d’utiliser Font Awesome depuis leur CDN, cChoisissez 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 – http://fortawesome.github.io/Font-Awesome/ .

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/4.3.0/css/font-awesome.min.css' );
}

Méthode # 4 – Installer un plugin

Better Font Awesome

Il existe plusieurs plugin disponibles pour vous permettre d’utiliser Font Awesome sur votre site, mais le plugin Better Font Awesome est actuellement le plus performant. Tout ce que vous avez à faire est d’installer le plugin, l’activer, et utiliser les shortcodes.

Voici deux exemples de code fournis sur le site de Font Awesome.

Font Awesome - Exemple 2

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.

Font Awesome - Exemple 1

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.

menu éditeur WordPress

Si vous préférez utiliser le plugin Better Font Awesome, une liste déroulante s’est ajouté au menu de l’éditeur, vous permettant de sélectionner l’icône à insérer

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!

8 commentaires
  1. Scargoll

    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. Hubert

    Merci pour cette remarque pertinente :), j'ai fait la correction.

  3. Arsheer

    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 !

  4. Hubert

    Voilà une bonne nouvelle :)

  5. Menzan

    Bjr je ne trouve pas le fichier fonctions.php

  6. Hubert

    Bonjour, Il s'agit du fichier functions.php non pas fonctions.php qui se situe dans le répertoire du thème que vous utilisé. Je vous suggère de lire l'article Comment créer un plugin spécifique à votre site WordPress qui vous explique comment éviter de modifier functions.php

  7. Mari

    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 !

  8. Hubert

    Bonjour Mari, Cette page (en anglais) http://fortawesome.github.io/Font-Awesome/examples/ regroupe des exemples d'utilisations qui vous permettront de modifier le style en utilisant la 1ère méthode.

Laisser un commentaire

You have to agree to the comment policy.