Comment changer la taille d'une icône Font Awesome ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-03-29 11:38:11
Thèmes : css - font-awesome
Question

Comment faire pour changer la taille d'une icône Font Awesome ?

Réponse

Par défaut une icône Font Awesome a une taille de 16 pixels ; et les développeurs ont prévu principalement deux moyens pour changer la taille d'une icône Font Awesome version 6.

  • Une échelle dites littérale qui permet d'augmenter la taille d'une icône jusqu'à 10 fois sa taille d'origine.
  • Une échelle dites relative qui permet d'augmenter et de diminuer la taille d'une icône.

Remarque : l'échelle littérale ne tient pas compte de l'alignement des textes contigus à l'icône ; alors que l'échelle relative tient compte de l'alignement.

Dans les deux cas, vous devez ajouter une CLASS pour changer la taille des icônes de Font Awesome.

Exemple de CLASS littérales pour augmenter la taille :

 <i class="fa fa-check fa-5x"></i>

Vous pouvez aller de fa-1x à fa-10x.

Exemple de CLASS relatives pour diminuer ou augmenter la taille :

 <i class="fa fa-check fa-xl"></i>

Voici les correspondances en pixels des CLASS relatives :

  • fa-2xs correspond à 10 pixels.
  • fa-xs correspond à 12 pixels.
  • fa-sm correspond à 14 pixels.
  • fa-lg correspond à 20 pixels.
  • fa-xl correspond à 24 pixels.
  • fa-2xl correspond à 32 pixels.

Vous trouverez d'avantage d'information sur la manière de changer la taille d'une icône Font Awesome via cette page du site officiel.