Icônes Font Awesome Free

Avant-propos

Nous présentons ici l'usage de "Font Awesome Free" qui consiste en un jeu de 1'748 icônes (en version v6) qui sont sous licence libre (CC BY 4.0, MIT 1.1, SIL). Noter qu'il existe en outre des icônes "Font Awesome Pro", mais celles-ci sont utilisables sous licence payante.
L'intérêt des icônes Font Awesome réside dans le fait qu'elles sont implémentées sous forme de police de caractère et qu'elles réagissent ainsi aux différents traitements que l'on peut appliquer aux caractères (couleur, dimension...), contrairement aux icônes images classiques (PNG, GIF...).

Font browser & picker

Font Awesome Free v5 Solid (1'101 icônes): Icon name:

Font Awesome Free v6

V6 Icon Reference (1'748 icônes) : Solid (1'128) | Regular (161) | Brands (459)
autre outil de recherche | guide et liste

Font Awesome Free v5

V5 Cheatsheet (1'608 icônes) : Solid (1'001) | Regular (151) | Brands (456)
cheatsheet PDF

Usage

Syntaxe générale : <i class="style icon-name parameter(s)"></i> (ou utiliser container <span> au lieu de <i>)
Il est important de noter ci-dessous qu'absolument tous les attributs de classe Font Awesome commencent par fa !

<head>
  <link href="fontawesome-path/css/all.min.css" rel="stylesheet">  
</head>
<body>
  <i class="fa         fa-user"></i>    ⟶   
  <i class="fa-solid   fa-user"></i>    ⟶   
  <i class="fas        fa-user"></i>    ⟶   
  
  <i class="fa-regular fa-user"></i>    ⟶   
  <i class="far        fa-user"></i>    ⟶   
  
  <i class="fa-brands  fa-linux"></i>   ⟶   
  <i class="fab        fa-linux"></i>   ⟶   
</body>

Tailles relatives et absolues

  Relatives: <i class="fa fa-coffee fa-xs"></i> ⟶    fa-sm ⟶    fa-lg ⟶    fa-xl ⟶    fa-2xl ⟶ 
  Absolues: fa-1x ⟶    fa-2x ⟶    fa-3x ⟶    fa-4x ⟶   ... jusqu'à  fa-10x

Largeur fixe

  Variable: <i class="fa fa-info" style="background:#ddddff;"></i>   ⟶ 
  Fixe: <i class="fa fa-info fa-fw" style="background:#ddddff;"></i> ⟶

Couleurs et bordure

  <i class="fa fa-child fa-inverse" style="background:blue;"></i>     ⟶ 
  <i class="fa fa-child" style="color:yellow; background:black;"></i> ⟶ 
  <i class="fa fa-child fa-border"></i> ⟶

Rotation et miroir

  Rotation: <i class="fa fa-hand fa-rotate-90"></i> ⟶    fa-rotate-180 ⟶    fa-rotate-270 ⟶ 
  Rotation libre: <i class="fa fa-hand fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>   ⟶ 
  Miroir: fa-flip-horizontal ⟶    fa-flip-vertical ⟶    fa-flip-both ⟶

Animation

  <i class="fa fa-spinner fa-spin"></i>       ⟶    <i class="fa fa-sync fa-spin"></i>       ⟶ 
  <i class="fa fa-spinner fa-spin-pulse"></i> ⟶    <i class="fa fa-sync fa-spin-pulse"></i> ⟶ 
  
  <i class="fa fa-heart fa-beat"></i> ⟶ 
  <i class="fa fa-cloud-upload fa-fade"></i> ⟶ 
  <i class="fa fa-triangle-exclamation fa-beat-fade"></i> ⟶ 
  <i class="fa fa-volleyball fa-bounce"></i> ⟶ 
  <i class="fa fa-hand fa-flip"></i> ⟶ 
  <i class="fa fa-bell fa-shake"></i> ⟶

Superposition

<i class="fa fa-camera fa-1x"></i>
<i class="fa fa-ban fa-2x" style="color:red"></i>
<span class="fa-stack">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x" style="color:red"></i>
</span>

+ ⟶

Listes

<ul class="fa-ul">
<li><span class="fa-li"><i class="fa fa-check-square"></i></span> pommes
<li><span class="fa-li"><i class="far fa-square"></i></span> poires
</ul>

pommes
poires

Pour davantage de détails sur l'usage des styles sur les icônes, voir ici