Ionic Framework - Ionicons als Icon-Font

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.

💡 Keine Lust zu lesen?

Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, damit du tiefer in die Thematik einsteigen kannst.

Mehr Informationen zur Angular-Schulung

Teilnehmer:innen in der Veranstaltung Angular-Intensiv-Workshop

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>

💡 Hat dir das Tutorial geholfen?

Wir bieten auch Angular-Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst Du die Fragen stellen, die Du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie Dir beantworten.

Jetzt weiter lernen