ionic-framework
Ionicons
Zoeken…
Opmerkingen
In de moderne webontwikkeling is het gebruikelijk om lettertypen te gebruiken om pictogrammen weer te geven. Omdat lettertypen vectoren zijn, zijn ze onafhankelijk van de resolutie en kunnen ze eenvoudig worden gekleurd via CSS, om maar een paar voordelen te noemen in vergelijking met bitmapafbeeldingen enz. Ionicons is gemaakt door hetzelfde team waarmee Ionic Framework is gemaakt en kan in elk project worden gebruikt sinds ze zijn 100% gratis en open source. MIT-licentie.
Ionicons kunnen alleen of met Ionics CSS-componenten worden gebruikt wanneer ze bepaalde stijlen hebben volgens de bovenliggende elementen.
De startpagina en de lijst met pictogrammen zijn hier te vinden: http://ionicons.com/
Basis gebruik
Lettertypepictogrammen worden meestal in een <i> -tag geplaatst. Ionic heeft standaard CSS-stijlen voor de pictogrammen voor eenvoudig gebruik. Het meest eenvoudige voorbeeld van gebruik:
<i class="icon ion-home"></i>
Uitgebreid gebruik
Ionic heeft enkele CSS-componenten waar u Ionicons als standaard kunt gebruiken met vooraf ingestelde stijlen. De range klasse van de post <div> zal juiste styling toepassing op zowel de ingang en de iconen binnen het. Hier is een voorbeeld van een bereikschuifregelaar.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Een ander voorbeeld van Ionicon-gebruik in Ionische tabbladen waarmee een tabbladachtig menu wordt gemaakt. De tabs-striped tabs-color-assertive klassen definiëren de stijl van de tabs zelf. Pictogrammen worden gebruikt met eenvoudige <i> -tags en ze krijgen hun positionele stijl van de klassen die worden toegepast op de bovenliggende divs.
<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>