Inhalt

Für eine stylische App dürfen auch passende Icons nicht fehlen. Bei Ionic hat der Entwickler 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.

Bild

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.

Bild

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.

Bild


Die Kommentarfunktion ist vorübergehend deaktivert.

Wir hatten für Kommtare bisher Disqus eingesetzt. Dieser Service ist nach der DSGVO, dem neuen Datenschutzgesetz, nicht mehr rechtskonform einsetzbar.