ionic-framework
Ionicons
Ricerca…
Osservazioni
Nel moderno sviluppo del web è pratica comune usare i caratteri per visualizzare le icone. Poiché i font sono vettori, sono indipendenti dalla risoluzione e possono essere facilmente colorati tramite CSS, solo per citare alcuni vantaggi rispetto alle immagini bitmap. Ionicons è stato creato dallo stesso team creato da Ionic Framework e può essere utilizzato in qualsiasi progetto dal sono gratuiti al 100% e open source. MIT con licenza.
Ionicons possono essere utilizzati da soli o con componenti Ionics CSS quando hanno determinati stili in base agli elementi padre.
La homepage e l'elenco delle icone sono disponibili qui: http://ionicons.com/
Utilizzo di base
Le icone dei caratteri sono generalmente collocate all'interno di un tag <i> . Ionic ha stili CSS predefiniti per le icone per un facile utilizzo. L'esempio più semplice di utilizzo:
<i class="icon ion-home"></i>
Utilizzo prolungato
Ionic ha alcune componenti CSS in cui è possibile utilizzare Ionicons come impostazione predefinita con uno stile predefinito. La classe di range nell'elemento <div> applicherà lo stile corretto sia per l'input che per le icone al suo interno. Ecco un esempio di un cursore di intervallo.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Un altro esempio di utilizzo di Ionicon nelle schede ioniche che creerà un menu simile a una scheda. Le tabs-striped tabs-color-assertive definiscono lo stile delle schede stesse. Le icone vengono utilizzate con semplici tag <i> e ottengono il loro stile posizionale dalle classi applicate alle div parent.
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-b"></i>
Settings
</a>
</div>
