Metro-Icons werden in allen Arten von User-Interfaces (egal ob Web, Desktop oder Phone-App) immer beliebter. Da diese Icons einfarbig sind, kann man einen cleveren Trick nutzen um diese Icons skalierbar und flexibel in seinem Projekt zu nutzen.
Metro Icons in WinJS Applikationen
Ausschlaggebend für diesen Blogpost war dieser Post “Metro apps – a lot of icons are available out of the box”. Microsoft war recht clever und hat die eingebauten Metro-Icons als Schriftart “Segoe UI Symbol” bereitgestellt.
Icons als Schriftart, warum?
Um seine Icon-Welt skalierbar (d.h. für verschiedene Auflösungen), in verschiedenen Größen und in verschieden Spielarten (Farben etc.) vorrätig zu haben müsste man sich schon größere Gedanken machen. Es bietet sich doch aber an, ein bereits gut funktionierendes System zu nutzen – daher die Wahl auf die Schriftarten. Schriftarten können skalieren und verschiedene Farben annehmen und noch mehr…
Font-Awesome – für Twitter Bootstrap, aber auch für alle anderen WebApps
Font-Awesome hat die Twitter Bootstrap Icons als Schriftart hinterlegt und sollte in allen gängigen Browsern funktionieren.
Vorteile
- Skalierbarkeit! Vectorgrafiken halt…
- Alles was ich mit CSS und Schriftarten machen kann, kann ich auch mit den Icons machen!
- Asset-Management wird dadurch erheblich vereinfach
- …
Die Idee find ich ziemlich clever – jedenfalls hatte ich dies bislang bei Web-Applikationen so noch nicht gesehen, auch wenn es schon ewig “Symbol-Schriftarten” gibt (MS Symbol… ;) ).
