Le blog.

Utiliser une police d’icônes FontAwesome dans votre thème WordPress.

Que ce soit pour illustrer un bouton d’action ou symboliser les réseaux sociaux, il est souvent bien utile de proposer à ses clients une large panoplie d’icônes pour égayer les contenus d’un site WordPress. Les polices d’icônes web sont alors bienvenues pour ce genre d’utilisation : étudions comment ajouter à un thème WordPress la police web d’icônes FontAwesome dans ce petit tutoriel.

Les avantages d’une police web d’icônes comme FontAwesome

De plus en plus répandues sur la toile, les icônes webfonts s’avèrent très pratiques en terme de flexibilité d’utilisation et performances. Un bon set d’icônes permet d’offrir à votre site WordPress l’utilisation de plusieurs dizaines ou centaines d’icônes très rapidement.

Aucun JavaScript n’est nécessaire, les icônes sont considérées comme un texte quelconque ; la police n’est pas vraiment lisible et chaque caractère qui la compose est un symbole. Adieu les sprites d’images ou les centaines de JPG/PNG à charger pour afficher ces petits détails visuels : désormais, un seul fichier de polices permet de contenir toutes ces icônes et ainsi gagner en temps de chargement.

Icones FontAwesome et icônes images en zoom 400%
Icones FontAwesome et icônes images en zoom 400%

Autre avantage de taille : la flexibilité d’utilisation. Visuellement, une icône est un caractère de police : elle est donc bien plus personnalisable qu’une image. Grâce à ses propriétés vectorielles, on peut augmenter la taille d’un symbole sans en dégrader sa qualité et ainsi afficher des icônes très nettes et détaillées sur les écrans Retina. Ombre portée, couleur, angle de rotation voire même reflet, la personnalisation est quasi infinie via CSS.

Pourquoi FontAwesome ?

Je suis un fervent adepte de FontAwesome pour plusieurs raisons : à l’heure où j’écris, 369 icônes composent cette webfont entièrement gratuite. Le cheatsheet FontAwesome propose 2 avantages : il vous présente les icônes et leurs références HTML/CSS et permet de copier chaque caractère pour le coller n’importe où dans votre système. Ainsi, une fois la police installée, vous pouvez utiliser ces icônes dans vos designs sous Photoshop, Illustrator et compagnie. Enfin, des mises à jour régulières de cette banque d’icônes viennent étoffer cette déjà-grande collection.

J’utilise également parfois Fontello, un générateur d’icônes webfont, pour des projets ne nécessitant pas toutes les icônes FontAwesome. Cet outil bien pratique vous permet de sélectionner les symboles que vous désirez voir dans votre webfont et génère automatiquement les multiples formats de la police. La librairie proposée met à votre disposition un choix d’icônes gigantesque et est entièrement gratuite d’utilisation.

Que votre cœur balance pour FontAwesome, Fontello ou d’autres webfonts d’icônes, découvrons désormais comment ajouter ces polices d’icônes à votre thème WordPress.

Charger le CSS FontAwesome dans un thème WordPress



function msk_load_css_fontawesome() {
  if (!is_admin()) {
    wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', null, '4.0.1' );
  }
}
add_action('wp_enqueue_scripts', 'msk_load_css_fontawesome');

Rien d’insurmontable ! Dans notre fonction maison, on s’assure que la page chargée n’est pas une page d’administration grâce à is_admin. On charge notre CSS via wp_enqueue_style puis on termine en utilisant l’action wp_enqueue_scripts pour charger proprement des scripts et des fichiers CSS dans le thème via la fonction WordPress wp_enqueue_style().

Notez que dans ce petit snippet de code, j’utilise le CDN proposé par Bootstrap CDN afin d’optimiser le chargement du fichier CSS FontAwesome. Vous pouvez également très bien opter pour télécharger les fichiers FontAwesome, les uploader dans un dossier /assets/fonts/ (par exemple) de votre thème et utiliser get_stylesheet_directory_uri() au lieu de l’URL Bootstrap CDN.

Utiliser les icônes FontAwesome dans votre thème WordPress

Une fois les polices chargées, il est alors très simple d’utiliser des icônes dans vos contenus ou dans les fichiers de votre thème WordPress. La structure HTML ressemble à cela :

<i class="fa fa-star"></i>

… fa-star étant la référence de l’icône que vous aurez trouvée sur la page cheatsheet FontAwesome.

Encore une fois, rien d’insurmontable n’est-ce pas ;) ? Ce petit bout de code à insérer dans votre HTML permettra d’afficher l’icône en question.

De nombreuses classes CSS additionnelles peuvent être ajoutées à cette icône :

  • fa-lg, fa-2x, fa-3x, fa-4x, fa-5x permettent d’augmenter la taille de l’icône (de 133% pour fa-lg à 500% pour fa-5x)
  • fa-fw (pour fixed width, largeur fixe) permet d’équilibrer la largeur des icônes afin qu’elle soient centrées et de même taille dans une liste <ul> ou <ol> par exemple
  • fa-ul (sur les <ul>) et fa-li (sur les icônes dans les <li>) permet de remplacer les points de listes par des icônes
  • fa-spin fait tourner l’icône indéfiniment, pratique pour les icônes rondes comme fa-spinnerfa-refresh ou fa-cog
  • et bien d’autres classes CSS disponibles sur la page d’exemples officielle

Créer un shortcode WordPress pour ajouter une icône FontAwesome

Même si la structure HTML requise pour insérer une icône dans le contenu n’est pas bien complexe, terminons ce tutoriel en créant un simple shortcode pour simplifier l’insertion d’icônes dans l’éditeur visuel TynyMCE de WordPress. Il serait en effet contre-productif d’expliquer au client l’édition du code HTML d’un contenu pour lui permettre d’illustrer ses propos par des icônes, alors offrons-lui la possibilité d’utiliser un shortcode !



function msk_fontawesome_shortcode($param) {
  extract(
    shortcode_atts(
      array(
        'icon' => 'star'
      ),
      $param
    )
  );
  return '<i class="fa ' . $icon . '"></i>';
}
add_shortcode('fa-icon', 'msk_fontawesome_shortcode');

En ajoutant ce code dans votre fichier functions.php, vous aurez désormais la possibilité d’utiliser le shortcode [fa-icon icon= »fa-star »]. Evidemment, fa-star peut-être remplacé afin d’afficher l’icône que vous souhaitez. Il est également possible de combiner avec les classes CSS additionnelles que nous avons décrites précédemment comme par exemple avec [fa-icon icon= »fa-star fa-4x »].

Vous voila désormais parés pour diminuer vos requêtes HTML de chargement d’images et remplacer toutes ces vétustes icônes par de modernes icônes via webfont !

7 commentaires ont été rédigés, ajoutez le votre.

  1. Rétrolien: Modif style | Pearltrees

  2. ismael13 Répondre

    Merci pour cette article, très utiles ces fonts pour agrémenter nos sites

  3. Guillaume Répondre

    Bonjour,
    sympa les shortcode avec fontawesome (mon favori aussi). Seulement les utilisateurs n’ont pas accès au-dessus de la fenêtre d’édition d’un petit utilitaire pour visualiser les icônes et insérer directement le shortcode. Il faut allier sur le site de fontawesome et copier le code à placer dans la balise. Bref, pas encore assez user friendly à mon goût pour des « clients ».

    Super article ;)

    • Pierre Saïkali Répondre

      Merci pour ton commentaire. Tu mnas donné une idée de futur tutoriel, je n’ai encore jamais ajouté d’icônes à l’éditeur tinymce et codé une interface pour ce genre de trucs je vais fouiller…

      • Guillaume Répondre

        Pourquoi pas un hack du système symboles déjà en place en codant un petit plugin ;)

        Je m’abonne au blog, je voudrais pas passer à côté d’un tel tuto.

  4. emilie Répondre

    Bonjour,

    Je viens d’ajouter votre code à mon thème wordpress. Ça fonctionne bien pour les icônes de base mais pour les icônes de versions 4.x, ça ne fonctionne pas. Comment puis-je faire?

    Merci par avance

Laisser un commentaire