Bootstrap - Glyphicons
Questo capitolo tratterà di Glyphicons, il suo utilizzo e alcuni esempi. Bootstrap raggruppa 200 glifi in formato font. Vediamo ora cosa sono i Glyphicons.
Cosa sono i glificoni?
I glifici sono caratteri icona che puoi utilizzare nei tuoi progetti web. I Glyphicons Halfling non sono gratuiti e richiedono una licenza, tuttavia il loro creatore li ha resi disponibili gratuitamente per i progetti Bootstrap.
"Si consiglia, come ringraziamento, di includere un collegamento facoltativo a GLYPHICONS ogni volta che è possibile". - Documentazione Bootstrap
Dove trovare i glificoni?
Ora che abbiamo scaricato la versione 3.x di Bootstrap e comprendiamo la sua struttura di directory dal capitolo Configurazione dell'ambiente , i glyphicons possono essere trovati all'interno della cartella dei font . Questo contiene i seguenti file:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
Le regole CSS associate sono presenti nei file bootstrap.css e bootstrap-min.css all'interno della cartella css della cartella dist . Puoi vedere i glyphicons disponibili a questo link GLYPHICONS .
Utilizzo
Per utilizzare le icone, è sufficiente utilizzare il codice seguente praticamente ovunque nel codice. Lascia uno spazio tra l'icona e il testo per un riempimento corretto.
<span class = "glyphicon glyphicon-search"></span>
Il seguente esempio lo dimostra:
<p>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type = "button" class = "btn btn-default btn-lg">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type = "button" class = "btn btn-default btn-sm">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type ="button" class = "btn btn-default btn-xs">
<span class = "glyphicon glyphicon-user"></span>
User
</button>