Utilisation dans une page web

1. Recherche d'icônes

Nous avons maintenant intégré la librairie Font Awesome sur notre site web.
Il est temps maintenant de chercher les icônes que nous allons insérer.

2. Affichage basique

Nous allons maintenant entrer le code nécessaire pour faire apparaître ces icônes.

La syntaxe de base est la suivante :
Icones "Solid" ("fas") :
Icones "Brand" ("fab") :

3. Exemples basiques

4. Utilisation d'options

En plus de la syntaxe de base, on peut ajouter des paramètres utiles pour un affichage adapté à la situation.

La syntaxe avec options est la suivante :

Les options sont de plusieurs natures :

• Taille
  fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-5x, fa-7x, fa-10x
  
  
• Alignement vertical
  (Alignement vertical parfait quelque soit la largeur des icônes, "Fixed Width")
  fa-fw
  
  
• Rotation et renversement
  fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-horizontal, fa-flip-vertical, fa-flip-both
  
  
• Icônes animés
  fa-spin, fa-pulse

Il existe d'autres options.
Icônes colorés
Il suffit d'ajouter à l'intérieur de la balise < span > le code suivant :
style = "color:#code-couleur-hexa"
Vous trouverez la documentation complète des options sur la page dédiée du site hôte.

Coloration des icônes

Pour colorer les icônes, c'est un paramètre que l'on ajoute dans la balise < span> mais pas à l'intérieur de la balise "class".
Il suffit d'ajouter à l'intérieur de la balise < span > le code suivant :

style = "color:#code-couleur-hexa".

Cela donne le code complet suivant :

<span class="fas fa-nom-icône [option 1] [option 2] [option 3]" style = "color:#code-couleur-hexa">span>

5. Exemples avec options

Icône	Code
	<span class="fas fa-anchor fa-2x" style="color:slategray">span>
	<span class="fas fa-lightbulb fa-3x fa-flip-vertical" style="color:#FFFACD">span>
	<span class="fab fa-ubuntu fa-5x fa-spin" style="color:#DB4E2A">span>
	<span class="fas fa-fan fa-2x fa-pulse" style="color:LightSalmon">span>
	<span class="fas fa-palette fa-3x xoopsweb-color">span> Coloration directement dans la classe Si vous avez défini des couleurs via des classes, vous pouvez les utiliser directement, comme dans l'exemple ci-dessus. Dans notre fichier personnel css, nous avons ajouté cette ligne : .xoopsweb-color { color : LightSteelBlue ; }

Vous avez maintenant tout ce qu'il faut pour profiter de la librairie Font Awesome dans vos pages web !
Bonne utilisation !

---