Font Awesome est une police d’icônes très complète qui vous permet d’utiliser des icônes facilement sur votre blog, que ce soit dans vos articles ou à n’importe quel endroit de votre design !
C’est un moyen efficace d’attirer l’attention du lecteur sur les points importants ; utiliser des icônes vient compléter intelligemment les autres éléments de mise en page (titres, sauts de ligne, paragraphes, encarts de texte, etc).
Bien sûr, pas question de transformer vos articles en temples du bling-bling bourrés d’icônes mais parfois, elles aident à mettre en valeur un aspect important :
- Par exemple, lorsque l’on crée une liste : au lieu de mettre une simple puce ronde ou carrée, une icône donne un peu de dynamisme !
- On peut aussi s’en servir pour souligner des points forts ou signaler des points faibles en présentant un produit.
- Parler d’un coup de cœur.
- Mettre une note.
La seule limite est celle de votre créativité !
La police d’icônes : mettre en valeur sa mise en page
Pour afficher des icônes, on pourrait s’amuser à utiliser une image à chaque fois. Une image représentant un cœur, un pouce levé, une étoile… Ce n’est pas une solution optimale :
- D’abord, parce que l’image a un certain poids et que trop d’images risquent d’alourdir inutilement la page ;
- Ensuite, parce que l’image n’est pas un format très flexible. Si vous voulez afficher un cœur tantôt rouge, tantôt noir, il vous faudra deux images différentes. Même chose si vous avez besoin d’un cœur plus ou moins gros selon les articles : pour chaque taille d’icône, vous devrez créer une image séparée.
La solution est d’installer sur votre blog une police d’icônes. Une police d’icônes, c’est quoi ? C’est comme une police d’écriture… mais au lieu d’avoir des lettres, vous avez des images. Comme avec une police d’écriture, vous pouvez facilement changer la couleur et la taille de vos icônes, elles n’alourdissent pas la page web et ne se déforment pas quand on les agrandit.
Je vous propose d’installer Font Awesome sur votre blog. C’est une police d’icônes très complète qui vous permettra d’avoir accès sur votre blog à des dizaines d’icônes.
Installer Font Awesome sur son blog
Sur Blogger, l’utilisation de Font Awesome s’adresse plutôt à des blogueurs capables de rédiger leurs articles sans éditeur visuel tandis que sur WordPress, même les débutants peuvent l’installer grâce à un plugin facile à utiliser.
Installer Font Awesome sur Blogger
Allez d’abord sur le site de Font Awesome et entrez votre adresse e-mail dans le champ prévu à cet effet.
Vous recevrez un code conçu exprès pour vous… ce qui vous permettra de recevoir les mises à jour de Font Awesome automatiquement, sans avoir à remettre les mains dans le code (ils ajoutent régulièrement de nouvelles icônes !).
Le mail que vous recevez est dans cet esprit :
Nous allons maintenant l’insérer sur Blogger. Allez dans le menu « Thème » de votre administration Blogger et cliquez sur « Modifier le code HTML ». Cherchez dans ce code la ligne <head> et juste après, copiez le code de Font Awesome.
Cette ligne vous évite de trop entrer dans les détails techniques de l’installation. Elle vous permet de récupérer automatiquement le fichier qui définit la liste des icônes. Vous n’avez plus qu’à enregistrer le modèle… et vous voilà prêt à utiliser les icônes !
Sur Blogger, pour les utiliser il faudra rédiger vos articles en mode HTML (et non en mode visuel) :
Pour insérer une icône, il faut d’abord trouver le nom de l’icône sur cette page. Par exemple, l’icône représentant une petite roue dentée s’appelle « cog ». Il faut ensuite écrire ceci sur Blogger pour l’afficher :
<i class="fa fa-cog"></i>Il faut toujours répéter cette même structure, en remplaçant juste « cog » par le nom de l’icône qui vous intéresse. Par exemple, pour l’icône « twitter » on écrira :
<i class="fa fa-twitter"></i>Verdict :
Ensuite, vous pouvez agir sur l’apparence de vos icônes et notamment sur :
- Leur taille – Il suffit d’ajouter entre les guillemets fa-2x pour qu’elles doublent de volume, fa-3x pour qu’elles triplent de volume. On peut aller jusqu’à fa-5x. Exemple pour l’icône de la petite roue :
<i class="fa fa-cog fa-3x"></i>
- Faire tourner les icônes – Comme dirait Franck Ribéry, « la routourne va tourner ». Rajoutez fa-spin dans les guillemets…
<i class="fa fa-cog fa-3x fa-spin"></i>La roue tourne sur elle-même !
- Faire pivoter les icônes – On peut aussi changer la position des icônes. Par exemple, ci-dessous je me suis amusée avec l’icône « child » (enfant). Il suffit de rajouter fa-rotate-XX (XX pouvant être 90°, 180° ou 270° de rotation). Par exemple :
<i class="fa fa-cog fa-3x fa-rotate-180"></i>
Amusez-vous bien ;)
Installer Font Awesome sur WordPress
Si vous ne souhaitez pas installer de plugin, vous pouvez suivre la même méthode que sur Blogger et copier la ligne de code après le <head> dans le fichier header.php de votre thème.
Vous pourrez là aussi, en utilisant l’éditeur HTML à la place de l’éditeur visuel, obtenir les mêmes résultats que sur Blogger et utiliser la police d’icônes Font Awesome très facilement.
Sinon, il existe un plugin gratuit, AGP Font Awesome Collection. Installez-le à partir du menu Extensions > Ajouter de WordPress et n’oubliez pas de l’activer !
Ensuite, tout se passe au moment de la rédaction d’un article dans l’éditeur visuel. Il suffit de cliquer sur l’icône Font Awesome pour avoir accès à toutes les options.
Afficher une simple icône – Vous commencez par choisir « Simple Icon » dans le menu Elements, optez ensuite pour l’icône de votre choix dans le menu Parameters, définissez sa couleur, sa couleur quand on la survole et sa taille (en pixels). Vous pouvez prévisualiser l’icône avec le bouton « Preview » ou l’insérer directement dans votre article avec le bouton « Insert » :
Afficher une icône à gauche d’un texte – Cette fois-ci, choisissez « Simple Icon with text and shape » : vous devez définir une icône, un texte de votre choix (le texte est facultatif). L’icône s’affichera sur un fond coloré, vous pouvez choisir la forme de ce fond (« shape type » : rond comme dans l’exemple ci-dessous, arrondi ou carré) et définir les couleurs de chaque élément.
A chaque fois, vous avez la possibilité d’indiquer la couleur principal mais aussi une couleur différente au survol de la souris (« on mouse hover »).
Afficher une icône cliquable – Vous pouvez enfin grâce au plugin créer des icônes cliquables. Le principe reste le même, vous avez beaucoup d’options supplémentaires, notamment :
- « Link URL » pour indiquer vers quelle page renverra l’icône ;
- « Title » pour indiquer le descriptif du lien au survol ;
- « Target » : c’est la façon dont le lien s’ouvrira. Vous utiliserez surtout « self » (ouverture du lien dans le même onglet) ou « blank » (ouverture du lien dans un nouvel onglet).
- « Border radius » : vous pouvez définir une bordure autour de votre icône (et choisir son épaisseur et sa couleur). Le « radius », c’est son degré d’arrondi. Plus vous mettez un chiffre élevé, plus votre icône va avoir une forme arrondie. 0px vous donnera une icône carrée, 10px une icône carrée aux coins arrondis… et avec 50px, l’icône sera bien ronde !
Voilà pour aujourd’hui ! J’espère que ce tutoriel vous donnera des idées si vous avez envie d’installer une police d’icônes pour enrichir vos mises en page !
Hello ! Je suis en congé maternité jusqu'à l'été 2023. Pendant cette période, les commentaires du blog sont fermés.
je précise que le code fourni sur la page d’accueil mon blogger me le refuse
bonjour – merci pour cet excellent tuto sauf que sur la version 2018 je ne trouve pas ou l’on met son mail pour recevoir le code ? quelqu’un a t’il rencontré le problème et peut m’eclairer
Hello Laure, tu as essayé le code que tu obtiens en cliquant sur l’onglet « SVG & JS » ? Ou le code de l’onglet « Web Fonts & CSS » ? Quel est le message d’erreur sur Blogger ?
Merci ! Je cherchais comment faire pour intégrer un icône, je suis venu sur ton site, et j’ai trouvé ! Ça marche !
Ah mais c’est toujours mieux quand ça marche ;)
Je viens de tomber sur ton article, et tu me sauves la vie ! Ceci étant dit, impossible de faire fonctionner le plugin dont tu parles. Quand je veux rédiger un article, la petite icône « FA » s’affiche bien mais une fois que je clique dessus et que la boîte de dialogue apparaît, impossible d’en faire quoi que ce soit. Je vais essayer en passant par la ligne de code, mais sais-tu d’où le problème pourrait venir ? Des bisous ! xx
Bonjour Ophélie, je ne sais pas d’où provient l’erreur, peut-être un problème de compatibilité entre deux extensions installées sur ton blog. Je te conseille de poser la question au créateur du plugin sur le forum de support technique, il semble répondre à tout le monde ! Bon week-end :)
Enfin je trouve LA réponse à ce que je cherchais depuis pas mal de temps ( et aussi parce qu’on fait vite le tour de icones alt+….. !)
Je n’ai pas encore testé sur mon blog mais est-ce qu’il est possible d’insérer aussi une icône dans le titre d’un article sous blogger après avoir installé Font Awesome ?
Mille mercis pour ce super blog ! ☺
Je viens de tester rapidement et ça semble fonctionner, on peut mettre du code HTML dans les titres d’articles :)
J’ai testé et ça marche super bien … Merci !!
Top ! Je viens d’aller voir le résultat, c’est chouette :)
Pour ceux que ça intéresse, je fais une petite capture d’écran du rendu :
Super chouette! Le problème, c’est de ne pas cèder à tous les plugins pour ne pas en avoir trop :(
Oui, c’est pour ça que j’ai aussi donné la méthode pour utiliser Font Awesome sans plugin :) On peut vite se retrouver avec des plugins « gadget » ou un blog « sapin de Noël » ^^ Tu vas me dire, c’est de saison !
youpi!!! Je vais vite installer ce pluggin! Merci pour le partage, j’ai moi même publié un article aujourd’hui sur comment installer une police c’est complémentaire. Merci encore pour ce partage, ça donnera plus de gaieté a les posts! Sonia
Exactement ! (oui, j’adore cette icône, et alors ? ;))
Thank youuuuu copine
De rien !
Super, je ne connaissais pas ce plugin et cela faisait longtemps que je cherchais comment intégrer des icônes à mes articles.
C’est fou, toutes les informations que l’on trouve sur ton blog !
Je ne saurai jamais assez te dire merci.
Ça me fait plaisir que tu trouves des infos utiles à piocher sur le blog :)
Han mais c’est génial !!
Faut que je teste ça dès que j’ai 2 minutes
Oui c’est un petit bijou ! (Comment ça, il ne faut pas jouer avec les icônes ? #regardinnocent)
Encore un bel article, qui montre que finalement on peut aussi faire des choses sur blogger.
Oui et d’ailleurs, j’en ai été la première surprise quand j’ai commencé à mettre le nez dedans. Au premier abord, la plateforme a une image tellement old school qu’on peut vite la fuir… et quand on ne se fie pas aux apparences et qu’on creuse un peu, c’est en fait très puissant et flexible… sans compter la tolérance en termes de monétisation, etc. On peut vraiment faire de très beaux blogs sur Blogger !