Icon Fonts – performante Bilder fürs Web

Icon Fonts sind Schriftarten die nur kleine Bilder sogenannte Icons statt Buchstaben, Ziffern etc. darstellen, ähnlich wie die bekannte Schriftart Webdings die man aus Word kennt.

Vorteile dieser Methode:

  • voll skalierbar
  • in der Farbe über Schriftfarbe anpassen
  • kleiner als eine Reguläre Bilddateien in entsprechenden Größen

es gibt bereits fertige Font Icon Sets im Web hier zwei der bekanntesten Beispiele:

Wie sie die entsprechenden Schriftarten per CSS einbinden erfahren Sie auf den jeweiligen Seiten. Sie können aber anhand von SVG Dateien auch eigene Icon Fonts erstellen, hierzu gibt es im Web entsprechende Generatoren:

https://www.google.de/#q=icon+font+generator

Beachten Sie das Sie auf den meisten Seiten ihre Icons automatisch für andere freigeben, um den Service nutzen zu können. Sie können also auch auf diesen Seiten weitere Icon Fonts herunterladen.

Nutzen Sie allerdings nicht zu viele verschiedene Webfonts auf einmal, da sonst wieder ihre Ladezeiten steigen. Der Vorteil dieser Methode liegt nämlich darin, dass Sie statt vieler kleiner Dateien nur eine laden was eleganter und schneller ist, hinzu kommen die oben genannten Vorteile. 

Warum aber dieser Beitrag in diesem Qlik Blog?

Nun durch sogenannte DOM Manipulation kann man diese Icons auch einsetzten um z.B. die Icons in den QlikView Titelleisten zu ersetzen, sich eigene Elemente zu schaffen die schnell und einfach geladen werden können. Oder ihren eigenen Elemente ihrer Extension optisch ansprechender zu gestalten. Ein entsprechendes Beispiel wird sicherlich noch folgen…

Fontawesome ist bereits Bestandteil von Qlik Sense

fontawesome

Share

Schreibe eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.