Font Awesome tutorial

Icona Font Awesome

Font Awesome è una splendida libreria di icone e framework CSS.

Font Awesome font fornisce icone vettoriali scalabili, che possono essere personalizzate in dimensione, colore, ombra e qualsiasi stile CSS utilizzabile.

Per utilizzare le icone di Font Awesome, aggiungi la seguente riga nella sezione del tuo HTML pagina:

1、CDN raccomandato per il mercato cinese:

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、CDN raccomandato per l'estero

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

Attenzione: Non si consiglia di scaricare per installare, è sufficiente referenziare il file CDN nel header del documento HTML.
Attenzione: Questo tutorial utilizza la versione 4.7.0.

Puoi utilizzare il prefisso fa e il nome dell'icona per posizionare le icone di Font Awesome.

Esempi online

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
　
</body>
</html>

Prova a vedere ‹/›

Font Awesome è progettato per essere utilizzato con elementi in linea. Gli elementi <i> e <span> sono ampiamente utilizzati per le icone.

Inoltre, se si modifica la dimensione del font o il colore del contenitore dell'icona, l'icona cambia.

Iconi grandi

Le classi fa-lg (aumenta del 33%), fa-2x, fa-3x, fa-4x, o fa-5x vengono utilizzate per aumentare la dimensione dell'icona rispetto al suo contenitore.

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
　
</body>
</html>

Prova a vedere ‹/›

Suggerimento: se il tuo icona viene tagliata in alto e in basso, aumentare l'altezza della riga.

Iconi della lista

Le classi fa-ul e fa-li vengono utilizzate per sostituire i prefissi predefiniti degli elenchi non ordinati.

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<ul class="fa-ul">
　　<li><i class="fa-li fa fa-check-square"></i>Iconi della lista</li>
　　<li><i class="fa-li fa fa-spinner fa-spin"></i>Iconi della lista</li>
　　<li><i class="fa-li fa fa-square"></i>Iconi della lista</li>
</ul>
　
</body>
</html>

Prova a vedere ‹/›

L'effetto dopo l'esecuzione è il seguente:

Icone con margini e strappate

Le classi fa-border, fa-pull-right o fa-pull-left sono utilizzate per citazioni strappate o icone di articoli.

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Tutorial di base -- Impara bene la base per andare più lontano!!!<br>
Tutorial di base -- Impara bene la base per andare più lontano!!!<br>
Tutorial di base -- Impara bene la base per andare più lontano!!!<br>
Tutorial di base -- Impara bene la base per andare più lontano!!!
　
</body>
</html>

Prova a vedere ‹/›

L'effetto dopo l'esecuzione è il seguente:

Icone dinamiche

La classe fa-spin fa permette all'icona di ruotare, la classe fa-pulse fa fa fa spin fa permette all'icona di ruotare a 8 passi per ciclo.

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
　
</body>
</html>

Prova a vedere ‹/›

L'effetto dopo l'esecuzione è il seguente:

Attenzione: IE8 e IE9 non supportano gli animazioni CSS3.

Icone ruotate e ribaltate

Le classi fa-rotate-* e fa-flip-* sono utilizzate per ruotare e ribaltare le icone.

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
　
</body>
</html>

Prova a vedere ‹/›

L'effetto dopo l'esecuzione è il seguente:

Icone sovrapposte

Per sovrapporre più icone, utilizzare la classe fa-stack sul padre, fa-stack-1x per icone di dimensioni normali, fa-stack-2x per icone più grandi.

La classe fa-inverse può essere utilizzata per sostituire il colore dell'icona. Puoi anche aggiungere una classe di icona più grande al padre per controllare ulteriormente le dimensioni.

Esempio

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-circle-thin fa-stack-2x"></i>
　　<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter su fa-circle-thin<br>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-circle fa-stack-2x"></i>
　　<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inversa) su fa-circle<br>
　
<span class="fa-stack fa-lg">
　　<i class="fa fa-camera fa-stack-1x"></i>
　　<i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban su fa-camera
　
</body>
</html>

Prova a vedere ‹/›

L'effetto dopo l'esecuzione è il seguente:

Icona con larghezza fissa

La classe fa-fw viene utilizzata per impostare un'larghezza fissa degli icone. È particolarmente utile quando la larghezza degli icone differenti si allinea diversamente. È particolarmente adatto per le liste di navigazione e le liste di gruppi di Bootstrap.

Esempio

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<p>Con larghezza fissa:</p>
<div class="list-group">
　　<a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Casa</a>
　　<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Biblioteca</a>
　　<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applicazioni</a>
　　<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Impostazioni</a>
</div>
<p>Senza larghezza fissa:</p>
<div class="list-group">
　　<a href="#" class="list-group-item"><i class="fa fa-home"></i> Casa</a>
　　<a href="#" class="list-group-item"><i class="fa fa-book"></i> Biblioteca</a>
　　<a href="#" class="list-group-item"><i class="fa fa-pencil"></i> Applicazioni</a>
　　<a href="#" class="list-group-item"><i class="fa fa-cog"></i> Impostazioni</a>
</div>
　
</body>
</html>

Prova a vedere ‹/›

L'effetto dopo l'esecuzione è il seguente:

Icona di marchio Font Awesome