Icone di base
Per utilizzare il font icone impressionanti, aggiungere la seguente riga all'interno del <head> sezione della pagina HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Nota: Non è richiesta alcuna scaricamento o installazione!
Si posiziona caratteri icone impressionanti utilizzando il prefisso fa e il nome dell'icona.
Esempio
Il seguente codice:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.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>Risultati in:
Font Impressionante è stato progettato per essere utilizzato con elementi in linea. Il <i> e <span> elementi sono ampiamente utilizzati per le icone.
Si noti inoltre che se si cambia il tipo di carattere, dimensione o il colore del contenitore dell'icona, l'icona cambia. Stesso discorso vale per le cose ombra, e qualsiasi altra cosa che viene ereditato usando i CSS.
Icone grandi
La fa-lg (33% increase) , fa-2x , fa-3x , fa-4x , o fa-5x classi sono utilizzate per aumentare l'icona dimensioni rispetto al loro contenitore.
Esempio
Il seguente codice:
<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>
Risultati in:
Tip: Se le icone sono sempre tagliate in alto e in basso, aumentare il line-height.
Elenco Icone
Gli fa-ul e fa-li classi sono utilizzate per sostituire le pallottole di default in liste non ordinate.
Esempio
Il seguente codice:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>Risultati in:
- List icons
- List icons
- List icons
Le icone bordate e tirò
Gli fa-border , fa-pull-right o fa-pull-left classi sono utilizzate per per le citazioni di tiro o le icone articolo.
Esempio
Il seguente codice:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Risultati in:
icone animate
La fa-spin classe ottiene qualsiasi icona per ruotare, e lo fa-pulse classe ottiene qualsiasi icona per ruotare con 8 punti.
Esempio
Il seguente codice:
<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>
Risultati in:
Nota: IE8 e IE9 non supportano le animazioni CSS3.
Ruotato e capovolto Icone
I fa-rotate-* e fa-flip-* classi sono utilizzate per ruotare e capovolgere le icone.
Esempio
Il seguente codice:
<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>Risultati in:
Icone impilati
Per impilare più icone, usare il fa-stack classe sul genitore, la fa-stack-1x classe per l'icona di dimensioni regolari, e fa-stack-2x per l'icona più grande.
La fa-inverse classe può essere utilizzato come colore di un'icona alternativa. È inoltre possibile aggiungere classi di icone più grandi per il genitore per controllare ulteriormente il dimensionamento.
Esempio
Il seguente codice:
<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 on 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 (inverse) on 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 on fa-cameraRisultati in:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Icone larghezza fissa
La fa-fw classe viene utilizzata per impostare le icone in una larghezza fissa. Questa classe è utile quando diverse larghezze icona buttare fuori allineamento. Particolarmente utile in navlists di bootstrap e gruppi della lista.
Esempio
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> Prova tu stesso " bootstrap
Font Impressionante funziona alla grande anche con tutti i componenti Bootstrap.