Font icone fantastiche

La libreria di icone Font Awesome fornisce 519 icone vettoriali scalabili gratuite. Questa libreria è completamente gratuita sia per uso personale che commerciale. Progettate originariamente per Bootstrap, queste icone possono essere personalizzate facilmente.

Caricamento della libreria dei caratteri

Per caricare la libreria Font Awesome, copia e incolla la seguente riga nella sezione <head> della pagina web.

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

Utilizzo dell'icona

Font Awesome fornisce diverse icone. Scegli uno di loro e aggiungi il nome della classe dell'icona a qualsiasi elemento HTML all'interno del tag <body>. Nell'esempio seguente, abbiamo utilizzato l'icona della valuta indiana.

<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>

Produrrà il seguente output:

Definizione della dimensione

È possibile aumentare o diminuire la dimensione di un'icona definendone la dimensione utilizzando CSS e utilizzandola insieme al nome della classe, come mostrato di seguito. Nell'esempio fornito, abbiamo dichiarato la dimensione come 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>

Produrrà il seguente output:

Definizione del colore

Proprio come la dimensione, puoi definire il colore delle icone usando CSS. Il seguente esempio mostra come cambiare il colore dell'icona della valuta indiana.

<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>

Elenco delle categorie

Font Awesome fornisce 519 icone nelle seguenti categorie:

  • Icone delle applicazioni Web
  • Icone della mano
  • Icone di trasporto
  • Icone di genere
  • Icone del tipo di file
  • Icone Spinner
  • Icone di controllo del modulo
  • Icone di pagamento
  • Icone del grafico
  • Icone di valuta
  • Icone dell'editor di testo
  • Icone direzionali
  • Icone del lettore video
  • Icone di marca

Per utilizzare una qualsiasi di queste icone, è necessario sostituire il nome della classe nei programmi forniti in questo capitolo con il nome della classe dell'icona desiderata. Nei prossimi capitoli di questa unità (Font Awesome), abbiamo spiegato per categoria l'utilizzo e le rispettive uscite delle varie icone di Font Awesome.