Bootstrap Glyphicons
Si tratta di una libreria di icone monocromatiche disponibile nei formati di immagine raster, nei formati di immagine vettoriale e come caratteri. Fornisce oltre 250 glifi in formato font. Puoi usare questi caratteri nei tuoi progetti web. Questi glifi non sono gratuiti, tuttavia se non devi spendere nulla nel caso in cui li utilizzi in progetti basati su Bootstrap.
Caricamento del carattere (libreria)
Per caricare la libreria Bootstrap Glyphicons, copia e incolla la riga seguente nella sezione <head> della pagina web.
<head>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>Utilizzo dell'icona
Bootstrap Glyphicons fornisce una serie di icone. Scegli uno di loro e aggiungi il nome della classe di icone a qualsiasi elemento HTML all'interno del tag <body>. Nell'esempio seguente, abbiamo utilizzato l'icona dell'albero e il nome della sua classe ètree-deciduous.
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous"> </i>
</body>
</html>Produrrà il seguente output:
Definizione della dimensione
È possibile aumentare o diminuire la dimensione di un'icona definendone la dimensione nel CSS e utilizzandola insieme al nome della classe come mostrato di seguito. Nell'esempio seguente, abbiamo definito la dimensione come 6 em.
<html>
<head>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>Produrrà il seguente output:
Definizione del colore
Puoi definire il colore di un'icona usando il CSS. Il seguente esempio di esempio mostra come cambiare il colore dell'icona dell'albero.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em; color: blue;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>Produrrà il seguente output: