ionic-framework
Ionicons
Sök…
Anmärkningar
I den moderna webbutvecklingen är det vanligt att använda teckensnitt för att visa ikoner. Eftersom teckensnitt är vektorer är de upplösningsoberoende och kan enkelt färgas genom CSS, bara för att nämna några fördelar jämfört med bitmappsbilder etc. Ionicons skapades av samma team som Ionic Framework skapades av och kan användas i alla projekt sedan de är 100% gratis och öppen källkod. MIT licensierad.
Ionicons kan användas på egen hand eller med Ionics CSS-komponenter när de har vissa stilar enligt överordnade element.
Hemsidan och listan över ikoner hittar du här: http://ionicons.com/
Grundläggande användning
Teckensnittikoner placeras vanligtvis i en <i> -tagg. Ionic har standard CSS-stilar för ikonerna för enkel användning. Det mest grundläggande exemplet på användning:
<i class="icon ion-home"></i>
Utökad användning
Ionic har några CSS-komponenter där du kan använda Ionicons som standard som har förinställd styling. Den range klassen i posten <div> gäller rätt styling för både in- och ikoner inuti. Här är ett exempel på en skjutreglage.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Ett annat exempel på användning av Ionicon i Ionic-flikar som skapar en flikliknande meny. De tabs-striped tabs-color-assertive klasserna definierar själva flikarna. Ikoner används med enkla <i> -taggar och de får sin positionella styling från klasserna som tillämpas på föräldradelarna.
<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>