Blog

Font Awesome

Vous vous lancez dans un projet web ? Vous avez besoin d’un pack d’icônes ? La solution que je vous propose est d’utiliser Font Awesome.

Sur le web les icônes sont des éléments qui peuvent apporter un style particulier à un site et le distinguer par rapport aux autres alors il ne faut pas les négliger 😉

Présentation

Mieux qu’un simple pack d’icônes contenant des dizaines/centaines d’images que l’on doit charger, c’est en fait une police web d’icônes. Des symboles sont associés aux caractères de cette police et aucune lettre ne sera affichée, vous verrez de bien belles icônes à la place. Elles sont considérées comme du texte traditionnel donc pas besoin de faire appel à des librairies de JavaScript ou autre.

L’utilisation de Font Awesome offre plusieurs avantages :

  • C’est seulement un fichier léger à charger contenant l’ensemble des icônes, ce qui permet un temps de chargement des pages nettement amélioré !
  • Comme les icônes sont des caractères de police, leur personnalisation est plus aisée, il est possible d’utiliser le CSS pour les modifier : couleur, taille, ombre, etc..
  • Avec des icônes vectorielles, vous n’avez plus à vous soucier de la taille, même si l’on zoom les icônes ne perdent pas en qualité et restent très nettes.
  • Depuis la version 4.2.0, c’est 479 icônes disponibles dans diverses rubriques : applications web, types de fichier, marques, etc…
  • Totalement gratuit, même pour une utilisation commerciale, et Open Source !

Installer Font Awesome sur votre thème WordPress

Pas de panique ! Rien de bien compliqué, je vais vous expliquer la méthode que j’utilise pour mon blog :

  1. Se rendre sur le site et télécharger Font Awesome
  2. Extraire le contenu du fichier zip et copier le répertoire dans un dossier de votre blog.
    Exemple :
    ~/wp-content/themes/fp_discover/css/fonts/font-awesome-4.2.0
  3. En général, on doit ajouter entre les balises <head> de votre code html l’emplacement de Font Awesome :
    <link rel="stylesheet" href="wp-content/themes/fp_discover/css/fonts/font-awesome-4.2.0/css/font-awesome.min.css">

    Mon thème gère les fichiers CSS grâce à la fonction wordpress « wp_enqueue_style » donc c’est un peu différent :

    wp_enqueue_style( 'fp-font-awesome', get_template_directory_uri().'/css/fonts/font-awesome-4.2.0/css/font-awesome.min.css' );

Utiliser les icônes

Il suffit d’éditer à nouveau le code HTML à l’emplacement où vous souhaitez ajouter une icône :

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

Par ici pour la liste complète et sur cette page vous trouverez d’autres exemples très sympa.

Bon courage pour changer toutes vos anciennes icônes 😉

Partage: TwitterFacebookLinkedIn

Soyez le premier à publier un commentaire.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.