Comment utilise Font Awesome

Comment utiliser font Awesome

.Font awesome est une librairie d’icônes gratuite qui va vous faire gagner un temps précieux en développement et fournir à vos utilisateurs des icônes riches et modernes.

À la fin de cet article, vous serez en mesure d’installer, personnaliser et afficher la librairie d’icônes Font Awesome sur votre site web.

Comment ça fonctionne ?

Si vous avez besoin d’icônes pour illustrer rapidement vos pages c’est la solution rapide et efficace. Si un jour vous avez besoin de remplacer Font Awesome par une autre librairie, cela reste possible et n’est pas complexe.

Comment installer Font Awesome ?

Installation simple et rapide

Ajouter un fichier CSS, c’est la méthode la plus simple et la plus rapide pour utiliser la librairie d’icônes.

Étape 1 : créer une liaison avec la librairie

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

Étape 2 : ajouter les icônes sur vos pages

Pour afficher vos premières icônes, il suffit d’ajouter le code suivant à l’emplacement désiré, entre <body> et </body>.

<i class="far fa-gem"></i>

L’exemple ci-dessus affiche l’icône suivante :

Étape 3 : personnalisez les icônes

Vous voulez une icône plus grande, de couleur rouge ? En fait vous savez déjà le faire ! Font Awesome est une police de caractère !

<i class="far fa-gem" style="font-size: 50px; color: red"></i>

Étape 4 : découvrez toutes les icônes et leur code unique

Pour consulter toutes les icônes que vous pouvez utiliser voici la liste liste complète des icônes gratuites

Le code à intégrer dans vos pages (cerclé de bleu) pour utiliser les icônes Font Awesome