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 :
- Se rendre sur le site et télécharger Font Awesome
- Extraire le contenu du fichier zip et copier le répertoire dans un dossier de votre blog.
Exemple :
[pastacode lang=”bash” message=”” highlight=”” provider=”manual” manual=”~%2Fwp-content%2Fthemes%2Ffp_discover%2Fcss%2Ffonts%2Ffont-awesome-4.2.0″/] - En général, on doit ajouter entre les balises <head> de votre code html l’emplacement de Font Awesome :
[pastacode lang=”markup” message=”” highlight=”” provider=”manual” manual=”%3Clink%20rel%3D%22stylesheet%22%20href%3D%22wp-content%2Fthemes%2Ffp_discover%2Fcss%2Ffonts%2Ffont-awesome-4.2.0%2Fcss%2Ffont-awesome.min.css%22%3E”/]Mon thème gère les fichiers CSS grâce à la fonction wordpress “wp_enqueue_style” donc c’est un peu différent :
[pastacode lang=”php” message=”” highlight=”” provider=”manual” manual=”wp_enqueue_style(%20’fp-font-awesome’%2C%20get_template_directory_uri().’%2Fcss%2Ffonts%2Ffont-awesome-4.2.0%2Fcss%2Ffont-awesome.min.css’%20)%3B”/]
Utiliser les icônes
Il suffit d’éditer à nouveau le code HTML à l’emplacement où vous souhaitez ajouter une icône :
[pastacode lang=”markup” message=”” highlight=”” provider=”manual” manual=”%3Ci%20class%3D%22fa%20fa-users%22%3E%3C%2Fi%3E”/]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 😉