Icônes

1 h Niveau 3

Ajouter des icônes dans une page HTML est on ne peut plus simple, en CSS. Il suffit simplement d’utiliser une bibliothèque d’icônes.

Ajouter des icônes

Font Awesome fait partie des bibliothèques d’icônes les plus utilisées par les développeurs web. Pour l’utiliser, il suffit juste d’ajouter le nom de l’icône dans l’attribut class de n’importe quel élément HTML de type inline, tel qu’un  ou un . L’élément HTML  est également souvent utilisé pour ajouter des icônes depuis une bibliothèque. À la base, cet élément HTML est utilisé pour mettre du contenu en italique, mais l’usage à fait que l’élément  est fréquemment interprété comme l’acronyme de “icône” ou du moins est utilisé à cette fin. Même s’il n’est donc pas rare de voir l’utilisation de cette balise afin d’afficher des icônes, gardez en mémoire que ce n’est pas une bonne pratique et ne correspond pas à la sémantique prodiguée par le HTML. Préférez l’utilisation de  lorsque c’est possible.

Remarque : Il est courant de trouver dans les documentations des librairies d'icônes des exemples d’utilisation avec la balise . Leur utilisation avec la balise  (et ainsi conforme à la sémantique HTML) n’entraîne normalement aucun désagrément.

Utiliser les icônes Font Awesome

Pour utiliser les icônes mises à disposition par Font Awesome, il suffit de se rendre sur le site web de Font Awesome, de créer un compte, puis d’obtenir un code qu’il faudra ajouter dans la section <head> de la page HTML.

L’avantage d’utiliser cette librairie est qu’il n’y a ni téléchargement, ni installation à effectuer.

Le code fournit par Font Awesome ressemble à cela :

<script src="https://kit.fontawesome.com/1561b8564b.js" crossorigin="anonymous"></script>

Remarque : le code se trouvant juste avant l’extension ‘.js’ est personnel et généré lors de la création du compte sur le site.

Exemple d’utilisation des icônes Font Awesome :

<!DOCTYPE html>
<html>
<head>
    <!-- Ligne de code fournie par le site. À placer absolument dans la section <head> -->
    <script src="https://kit.fontawesome.com/1561b8564b.js" crossorigin="anonymous"></script>
    <meta charset="utf-8" />
    <title>Mon site</title>
</head>
<body>
    <!-- Utilisation des icônes -->
    <span class="fas fa-bolt"></span>
    <span class="fas fa-bell"></span>
</body>
</html>

Icônes Bootstrap

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !