Utiliser des icônes de FontAwesome

Hello

Comme ça fait déjà plusieurs fois qu'on m'en parle, je me suis dit qu'un tutoriel pour t'expliquer comment utiliser FontAwesome aussi bien sur ton forum que sur d'autres page html serait utile.


Fontawesome est un site qui te met à disposition un package de js, CSS et typographies à utiliser aussi bien coté HTML que CSS et qui te permet d'afficher des icônes. Tu peux soit télécharger le package et tout ré-uploader sur ton propre hébergeur, soit appeler un js externe qui fera la même chose mais sans avoir besoin d'hébergeur. C'est cette dernière méthode que nous allons utiliser.


Avant d'entrer dans le vif du sujet, voici ce que tu peux faire avec FontAwesome :

Tasse
Diamant
Chat

Code:

<i class="fa fa-coffee"></i> Tasse
<i class="fa fa-diamond"></i> Diamant
<i class="fas fa-cat"></i> Chat

• Item 1
• Item 2
• Item 3

Code:

<style>.liste-miettes{list-style: none !important;}.liste-miettes li:before{content: '\f39a'; display:inline-block; font-family: "Font Awesome 5 Brands"; margin-right: 5px;}</style><!--
--><ul class="liste-miettes"><!--
  --><li>Item 1</li><!--
  --><li>Item 2</li><!--
  --><li>Item 3</li><!--
 --></ul>

Nous allons donc avoir comme référence le site de FontAwesome.


Ici, tu as 2 possibilités :
• soit tu te crées un compte sur le site et comme ça tu auras ton propre JS que tu mettras à jour toi-même.

Spoiler:

• soit tu utilises celui indiqué dans ce tuto que je mettrai à jour le plus régulièrement possible.

FontAwesome met régulièrement à jour ses listes d'icônes. Comme tu t'en doutes, toutes les icônes d'une version antérieure sont disponibles sur une version supérieure, mais pas l'inverse voilà pourquoi il faut toujours être à jour
Quand tu choisis une icône, vérifie bien qu'elle est disponible avec ta version

Spoiler:

On va donc commencer par appeler la CSS générée en utilisant ce code :

Code:

<!-- version 5.11.2 -->
<script src="https://kit.fontawesome.com/e5846bc56f.js" crossorigin="anonymous"></script>

On l'appellera juste avant la balise fermante

Code:

</head>

On l'ajoutera à juste avant la balise fermante

Code:

</head>

Dans le template overall_header.


Eh bien on l'ajoutera directement au début du message.

Code:

<!-- version 5.11.2 --><script src="https://kit.fontawesome.com/c7ee274ba4.js" crossorigin="anonymous"></script>
<i class="fa fa-coffee"></i> Tasse
<i class="fa fa-diamond"></i> Diamant
<i class="fas fa-cat"></i> Chat

Ici, tu vas voir, c'est super simple. Dès que tu as choisi l'icône qui te plait, il te suffit de cliquer dessus. Une page de ce type va s'ouvrir :

Spoiler:

Eh bien il te suffit de cliquer sur la partie "html"

Spoiler:

Ça se met automatiquement dans le presse-papier et il ne te reste plus qu'à le coller à l'endroit voulu


Ici, c'est un chouilla plus compliqué Pour pouvoir utiliser ça en CSS, par exemple dans des listes, on va devoir utiliser les pseudo-éléments :after ou :before.
On va donc avoir quelque chose de ce type :

Code:

.span-miettes-fontawesome:before{

}

Ensuite, il va falloir mettre ce sélecteur en display inline-block et lui ajouter le "content" (= l'icône qu'il contiendra). Pour récupérer ce content, il suffit de cliquer sur le code unicode :

Spoiler:

Et de précéder ce code d'un anti-slash \. On aura donc ce code CSS pour cet exemple :

Code:

.span-miettes-fontawesome:before{
  content: '\f5f1';
  display:inline-block;
}

Si on s'arrête là, on a ce rendu :

Un carré. Celui-ci signifie que le navigateur ne trouve pas cet icône. Il faut donc lui préciser la typographie où la trouver. Chaque icône fait partie d'une typographie particulière. Pour savoir laquelle correspond à ton icône, voici la démarche à suivre :

Spoiler:

Du coup, il nous suffit d'ajouter cette typographie à notre CSS :

Code:

.span-miettes-fontawesome:before{
  content: '\f5f1';
  display:inline-block;
  font-family: "Font Awesome 5 Brands";
}

Et là, ça devrait fonctionner :

---

Voilà, tu sais à présent comment ajouter de chouettes icônes à tes pages web En cas de souci, n'hésite surtout pas à te manifester à la suite de ce message.