Icônes géniales de polices

La bibliothèque d'icônes Font Awesome fournit 519 icônes vectorielles évolutives gratuites. Cette bibliothèque est entièrement gratuite pour un usage personnel et commercial. Conçues à l'origine pour Bootstrap, ces icônes peuvent être personnalisées facilement.

Chargement de la bibliothèque de polices

Pour charger la bibliothèque Font Awesome, copiez et collez la ligne suivante dans la section <head> de la page Web.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

Utilisation de l'icône

Font Awesome fournit plusieurs icônes. Choisissez l'un d'entre eux et ajoutez le nom de la classe d'icônes à n'importe quel élément HTML de la balise <body>. Dans l'exemple suivant, nous avons utilisé l'icône de la monnaie indienne.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'une icône en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons déclaré la taille 6 em.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Il produira la sortie suivante -

Définition de la couleur

Tout comme la taille, vous pouvez définir la couleur des icônes en utilisant CSS. L'exemple suivant montre comment modifier la couleur de l'icône de la devise indienne.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Liste des catégories

Font Awesome fournit 519 icônes dans les catégories suivantes -

  • Icônes d'application Web
  • Icônes de la main
  • Icônes de transport
  • Icônes de genre
  • Icônes de type de fichier
  • Icônes Spinner
  • Icônes de contrôle de formulaire
  • Icônes de paiement
  • Icônes graphiques
  • Icônes de devises
  • Icônes de l'éditeur de texte
  • Icônes directionnelles
  • Icônes du lecteur vidéo
  • Icônes de marque

Pour utiliser l'une de ces icônes, vous devez remplacer le nom de classe dans les programmes donnés dans ce chapitre par le nom de classe de l'icône souhaitée. Dans les prochains chapitres de cette unité (Font Awesome), nous avons expliqué par catégorie l'utilisation et les sorties respectives de diverses icônes Font Awesome.