Bootstrap icona del font (Glyphicons)

Questo capitolo spiegherà l'icona del font (Glyphicons), e alcuni esempi per comprendere il suo utilizzo. formati di font bootstrap in bundle con oltre 200 glifi. In primo luogo, dobbiamo prima capire che cosa è l'icona di carattere.

Qual è l'icona di carattere?

Font icona è un font icona utilizzata nel progetto Web. Anche se, halfling Glyphicons bisogno di una licenza commerciale, ma è possibile sulla base di progetto Bootstrap per l'uso gratuito queste icone.

Al fine di esprimere gratitudine icona autore, spero di aggiungere sito link GLYPHICONS durante l'uso.

Scarica l'icona Font

Abbiamo l'ambiente installato capitoli scaricare la versione 3.x Bootstrap, e comprendere la sua struttura di directory. Neifonticone delle cartelle possono trovare il font che contiene questi file il seguente:

• glyphicons-halfling-regular.eot
• glyphicons-halfling-regular.svg
• glyphicons-halfling-regular.ttf
• glyphicons-halfling-regular.woff

regole CSS correlati scritti nella cartella dibootstrap.cssdist cartella css ebootstrap-min.cssall'interno del file.

Caratteri lista icona

Clicca qui per visualizzare l'elenco dei disponibili icona caratteri.

interpretazione CSS delle regole

La seguente regola CSS costituisce glyphicon classe.

@ Font-face {
  font-family: 'Glyphicons halfling';
  src: url ( 'font ../ / glyphicons-halfling-regular.eot');
  src: url ( '../ #iefix font / glyphicons-halfling-regular.eot?') formato ( 'embedded-OpenType'), url ( '../ fonts / glyphicons-halfling-regular.woff') formato ( 'WOFF'), url ( 'font ../ / glyphicons-halfling-regular.ttf') formato ( 'TrueType'), url ( '../ fonts / glyphicons-halfling-regular.svg # glyphicons_halflingsregular') formato ( 'svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons halfling';
  -webkit-font-smoothing: antialias;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: scala di grigi;
}

Così font-face è infatti il ​​posto giusto per trovare dichiarazione glyphicons font-family e la posizione.

Classe .glyphicon dichiarare un offset dalla cima della 1px posizione relativa, reso come inline-block, i caratteri istruzione, disposizioni font-style e font-weight è normale, impostare l'altezza della riga a 1. Inoltre, l'uso di -webkit-font-smoothing: antialias e -moz-OSX-font-smoothing: scala di grigi; ottenere la consistenza cross-browser.

Poi, ove

.glyphicon: vuoto {
  Larghezza: 1em;
}

glyphicon vuoto.

Ci sono 200 classi, ogni classe per un'icona. Questi class formato comune è il seguente:

.glyphicon-chiave: prima {
  tenore: "HexValue";
}

Ad esempio, le icone all'utente di utilizzare, è classe come segue:

.glyphicon-utente: prima {
  tenore: "\ E008";
}

uso

Per utilizzare un'icona, è sufficiente utilizzare il seguente codice. Si prega di tenere lo spazio adeguato tra le icone e il testo.

<Span class = "glyphicon glyphicon-ricerca"> </ span>

L'esempio seguente mostra come utilizzare l'icona Font:

I risultati sono i seguenti:

Icona di carattere con la barra di navigazione

icona personalizzata Font

Abbiamo visto come utilizzare l'icona Font, quindi vediamo come personalizzare l'icona del tipo di carattere.

Inizieremo l'esempio precedente, cambiando la dimensione, il colore e applicare l'ombra del testo per essere icona personalizzata.

Ecco il codice inizia:

<Tipo Pulsante = "button" class = "btn btn-primaria btn-lg">
  <Span class = "glyphicon glyphicon-utente"> </ span> User
</ Button>

L'effetto è il seguente:

Personalizzato Dimensione carattere

Aumentando o diminuendo la dimensione del carattere dell'icona, è possibile effettuare l'icona apparire più grande o più piccolo.

<Tipo Pulsante = "button" class = "btn btn-primaria btn-lg" style = "font-size: 60px">
  <Span class = "glyphicon glyphicon-utente"> </ span> User
</ Button>

colore del carattere personalizzato

<Tipo Pulsante = "button" class = "btn btn-primaria btn-lg" style = "color: rgb (212, 106, 64);">
  <Span class = "glyphicon glyphicon-utente"> </ span> User
</ Button>

Applicare ombra di testo

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

icona di carattere in linea personalizzata

Clicca qui per personalizzare l'icona di carattere >>

lista icona