Fondazione Icona
Fondazione fornisce 283 icone, è possibile definire le dimensioni del suo stile usando i CSS.
Le icone possono essere utilizzati per testo, pulsanti, barre degli strumenti di navigazione, le forme, e così via.
I seguenti sono esempi di icone Fondazione:
Pulsante Aggiorna:
Rilevazione icona:
Home icon:
icona sintassi
Creare sintassi icone è la seguente:
<i class="fi-name"></i>
Sostituire nome dell'icona parte del nome.
Per utilizzare un'icona abbiamo bisogno della sezione <head> per aggiungere il file icona di stile:
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
Esempi di icone
I seguenti esempi illustrano l'uso di icone:
Esempi
<P> icona Cloud come un link :
<A Href = "#"> <i class = "fi-cloud"> </ i> </ a>
</ P>
<P> Stile Nube icona: < i class = "fi-cloud" style = "font-size: 35px; color: red;"> </ i> </ p>
<P> Home icon: <i class = "fi-casa"> </ i> </ p>
<P> icona Home su un pulsante :
<Tipo Pulsante = "button" class = "tasto">
<Classe I = "fi-casa "> </ i> casa
</ Button>
</ P>
<P> icona Home su un verde pulsante:
<Tipo Pulsante = "button" class = "tasto successo">
<Classe I = "fi-casa "> </ i> casa
</ Button>
</ P>
<P> icona Home su un grande tasto, la luce blu link:
<A Href = "#" class = informazioni "button large">
<Classe I = "fi-casa "> </ i> casa
</ A>
</ P>
Prova »
icone della barra degli strumenti
Possiamo usare .icon-bar di classe per creare un determinato numero di icone della barra degli strumenti:
Esempi
<A Href = "#" class = "item">
<I class = "fi-casa "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-segnalibro "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-info "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-mail "> </ i>
</ A>
<A Href = "#" class = "item">
<Classe I = "fi-like "> </ i>
</ A>
</ Div>
Prova »
Icona Descrizione Utilizzare <label> elemento:
Esempi
<A Href = "#" class = "item">
<I class = "fi-casa "> </ i>
<Label> Home </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-share "> </ i>
<Label> Condividi </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-info "> </ i>
<Label> Info </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-mail "> </ i>
<Label> Posta </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-ingrandimento -glass"> </ i>
<Label> ricerca </ label>
</ A>
</ Div>
.disabled classe lascia diventare non cliccabile status di icona:
Esempi
<I class = "fi-share "> </ i>
</ A>
<A Href = "#" class = "item disabled">
<I class = "fi-mail "> </ i>
</ A>
Prova »
.vertical classe viene utilizzata per creare una barra degli strumenti verticale:
Manuale Fondazione Icona di riferimento
Ulteriori informazioni sui contenuti del icona, è possibile fare riferimento al nostro manuale di icona Fondazione.