ionic-framework
Joniki
Szukaj…
Uwagi
We współczesnym tworzeniu stron internetowych często stosuje się czcionki do wyświetlania ikon. Ponieważ czcionki są wektorami, są niezależne od rozdzielczości i można je łatwo pokolorować za pomocą CSS, aby wymienić tylko kilka zalet w porównaniu z obrazami bitmapowymi itp. Ionicons został stworzony przez ten sam zespół, w którym Ionic Framework został stworzony i może być używany w każdym projekcie od są w 100% darmowe i open source. MIT na licencji.
Joniki mogą być używane samodzielnie lub ze składnikami Ionics CSS, jeśli mają określone style zgodnie z elementami nadrzędnymi.
Strona główna i lista ikon można znaleźć tutaj: http://ionicons.com/
Podstawowe użycie
Ikony czcionek są zwykle umieszczane wewnątrz znacznika <i> . Ionic ma domyślne style css dla ikon dla łatwego użycia. Najbardziej podstawowy przykład użycia:
<i class="icon ion-home"></i>
Rozszerzone użycie
Ionic ma pewne komponenty CSS, w których domyślnie można używać Ionicons, które mają ustawione style. Klasa range w elemencie <div> zastosuje poprawną stylizację zarówno dla wejścia, jak i ikon w nim zawartych. Oto przykład suwaka zakresu.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Kolejny przykład użycia Ionicon w kartach Ionic, które utworzą menu podobne do kart. Klasy w tabs-striped tabs-color-assertive określają styl samych zakładek. Ikony są używane z prostymi <i> i uzyskują swój styl pozycjonowania z klas zastosowanych do elementów div rodzica.
<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>