Comment installer la police d’icônes Font Awesome sur son blog ?


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 !).

Installer le CDN Font Awesome
Installer le CDN Font Awesome

Le mail que vous recevez est dans cet esprit :

Le code de Font Awesome
Le code de Font Awesome

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) :

Rédaction en mode HTML sur Blogger

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 :
Font Awesome sur Blogger

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>

    Taille des icônes Font Awesome

  • 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>

    Rotation icônes Font Awesome

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 !

Plugin AGP Font Awesome Collection sur WordPress
Plugin AGP Font Awesome Collection sur WordPress

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.

Font Awesome dans l'éditeur visuel

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 » :

Créer des icônes Font Awesome
Créer des icônes Font Awesome

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 »).

Ajouter une icône sur WordPress
Ajouter une icône sur WordPress

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 !
Créer une icône Font Awesome cliquable
Créer une icône Font Awesome cliquable

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 !

Utilisez-vous des icônes sur votre blog ?

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

23 commentaires sur “Comment installer la police d’icônes Font Awesome sur son blog ?

  • laure

    je précise que le code fourni sur la page d’accueil mon blogger me le refuse

    Répondre à laure
  • laure

    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

    Répondre à laure
    • Marlène

      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 ?

      Répondre à Marlène
  • Stéphane

    Merci ! Je cherchais comment faire pour intégrer un icône, je suis venu sur ton site, et j’ai trouvé ! Ça marche !

    Répondre à Stéphane
  • Ophélie G.

    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

    Répondre à Ophélie
    • Marlène

      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 :)

      Répondre à Marlène
  • Bellule

    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 ! ☺

    Répondre à Bellule
    • Marlène

      Je viens de tester rapidement et ça semble fonctionner, on peut mettre du code HTML dans les titres d’articles :)

      Répondre à Marlène
    • Bellule

      J’ai testé et ça marche super bien … Merci !!

      Répondre à Bellule
    • Marlène

      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 :
      Font Awesome dans un titre sur Blogger

      Répondre à Marlène
  • chloe

    Super chouette! Le problème, c’est de ne pas cèder à tous les plugins pour ne pas en avoir trop :(

    Répondre à chloe
    • Marlène

      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 !

      Répondre à Marlène
  • Sonia

    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

    Répondre à Sonia
  • madagascarian

    Thank youuuuu copine

    Répondre à madagascarian
  • Claudine Vive le piano

    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.

    Répondre à Claudine
    • Marlène

      Ça me fait plaisir que tu trouves des infos utiles à piocher sur le blog :)

      Répondre à Marlène
  • Odile Sacoche

    Han mais c’est génial !!
    Faut que je teste ça dès que j’ai 2 minutes

    Répondre à Odile
    • Marlène

      Oui c’est un petit bijou ! (Comment ça, il ne faut pas jouer avec les icônes ? #regardinnocent)

      Répondre à Marlène
  • Cécilia Autour de Cia

    Encore un bel article, qui montre que finalement on peut aussi faire des choses sur blogger.

    Répondre à Cécilia
    • Marlène

      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 !

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.