ionic-framework
Ionics
Suche…
Bemerkungen
In der modernen Webentwicklung ist es üblich, Schriften zum Anzeigen von Symbolen zu verwenden. Da Schriftarten Vektoren sind, sind sie unabhängig von der Auflösung und können leicht durch CSS gefärbt werden, um nur einige Vorteile gegenüber Bitmap-Bildern usw. zu nennen. Ionicons wurde von demselben Team erstellt, mit dem Ionic Framework erstellt wurde, und kann seitdem in jedem Projekt verwendet werden Sie sind zu 100% frei und Open Source. MIT Lizenziert.
Ionische Ionen können alleine oder zusammen mit Ionics-CSS-Komponenten verwendet werden, wenn sie entsprechend den übergeordneten Elementen bestimmte Stile haben.
Die Homepage und die Liste der Icons finden Sie hier: http://ionicons.com/
Grundlegende Verwendung
Zeichensymbole werden normalerweise in einem <i> -Tag platziert. Ionic verfügt über standardmäßige CSS-Stile für die Symbole zur einfachen Verwendung. Das grundlegendste Anwendungsbeispiel:
<i class="icon ion-home"></i>
Erweiterte Nutzung
Ionic verfügt über einige CSS-Komponenten, bei denen Sie Ionicons als Standard verwenden können, deren Stilvorgabe voreingestellt ist. Die range im Element <div> wendet sowohl die Eingabe als auch die darin enthaltenen Symbole korrekt an. Hier ist ein Beispiel für einen Bereichsschieberegler.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Ein weiteres Beispiel für die Verwendung von Ionicon in ionischen Registerkarten, die ein tabulatorähnliches Menü erstellen. Die tabs-striped tabs-color-assertive Klassen definieren den Stil der Registerkarten. Symbole werden mit einfachen <i> -Tags verwendet und erhalten ihre Positionsgestaltung von den Klassen, die auf die übergeordneten Divs angewendet werden.
<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>