ionic • angularjs • tutorial | Bengt Weiße • | 1 Minute
Für eine stylische App dürfen auch passende Icons nicht fehlen. Bei Ionic haben Entwickler:innen das Glück, dass das Ionic-Team eine eigene Icon-Font unter dem Namen Ionicons pflegt und stetig weiterentwickelt. Sie orientiert sich dabei an den System-Icons von iOS und Android. Dadurch stehen für verschiedene Anwendungsfälle gleich mehrere Icons zur Verfügung.
Die in unserem Einführungsartikel entwickelte Pizza-Service-App nutzt die Icon-Font, um sie ein wenig “aufzupeppen” (wenn das überhaupt noch irgendwie geht ;) ).
Link zum Quellcode und Live-Demo
In einem Ionic-Projekt stehen die Icons direkt zur Verfügung. Natürlich können diese auch in jedem anderen Projekt genutzt werden. Dazu können die Schriftarten und die CSS-Datei von code.ionicframework.com heruntergeladen werden oder ihr bezieht die neuste Version einfach über das entsprechende Git-Repository bzw. den dort üblichen Wegen wie bower bower install ionicons oder component component install driftyco/ionicons.
In die eigene App oder Webseite eingebunden, braucht ihr nur per entsprechende CSS-Klasse das Icon auswählen.
<i class="icon ion-home"></i>
Dazu einfach die Klasse icon, gefolgt von der entsprechende Icon-Klasse, setzten.
Eine Liste aller Icons mit der dazugehörigen CSS-Klasse könnt ihr auf ionicons.com einsehen und durchsuchen!
In der finalen Version unserer Ionic-Pizza-App werden an den unterschiedlichsten Stelle Ionicons zur Gestaltung genutzt.
Bengt Weiße
Bengt Weiße kommt aus dem grünen Herzen Deutschlands und interessiert sich schon seit seiner Kindheit für die Webentwicklung. Darum machte er auch sein früheres Hobby zum Beruf. Er beschäftigt sich bereits seit mehreren Jahren mit Web- und hybriden mobilen Anwendungen. Neben der frontendseitigen Umsetzung entwickelt er auch die nötigen Schnittstellen auf Basis von NodeJS und MongoDB. Anfang 2016 veröffentlichte er das erste deutsche Buch über das Ionic Framwork mit dem Titel "AngularJS & Ionic Framework, welches auch die nötigen Grundlagen im Bereich AngularJS vermittelt.
