Wahrscheinlich weißt Du schon, dass man mit Icon-Fonts schnell und leicht arbeiten kann. In diesem Beitrag analysieren wir das Design Werkzeug, seine Methodologie und wie man es verwenden kann.
Zunächst schauen wir die Suchabfragen in Google uns zeigt: “Icon Font” – 720 Anfragen pro Monat, “Download Icons” – 1000 Anfragen pro Monat (in US.) Die Zahlen sind fast gleiche, aber wo liegt die Unterschied zwischen die Beiden? Hier sehen wir dieses mächtige Design Werkzeug aus Sicht des Designers und Coders. Wir finden auch die Vorteile und Nachteile von Icon-Fonts und wir antworten auf die Frage, ob die wirklich ‘best representatives’ sind.
Es gibt kein Sinn zu diskutieren, ob die Verwendung von Icon Fronts im Web relevant ist. Es ist doch klar. Wir starten lieber mit Vor- und Nachteile von Bitmap-Icons und Icon-Fonts.
Bitmapped icons
Wir werden über Vektor Icons nicht sprechen, weil svg Support in IE ab die 9. Version startet und die 8. Version ist fast schon hier…
Aus der Designer-Perspektive
- Schnelle Suche:die Vorschau von Raster Grafik benötigt keine Installation einer zusätzlichen Software – schon bequemer.
- Die schnelle Umsetzung in Dokument: in Photoshop oder Gimp zieht man einfach die Datei in Dokument – auch bequem.
- Skalierte Rastergrafiken sind schlecht: Bei der Vergrößerung von Icons verliert man die Qualität – es ist schlecht.
Aus Sicht einer HTML- Coder
- Es ist ziemlich unbequem diese Icons aus die PSD herausziehen, aber wenn man das schafft, generiert jedes Icon eine Anfrage zur Server. Um diese Belastung zu reduzieren soll man Sprites erstellen – die kleine Grafik-Elementen in ein ganzes Bild kleben.
- Es ist leicht Raster Icons zu animieren, aber man kriegt sehr schlechtes Bildqualität.
- Auf den Mobile-Geräte sehen Bitmap Icons wegen der Skalierung ganz schlecht aus. Besonders auf dem Gerät mit Retina-Display.
Icon Fonts
In diesem Font ist jedes Element ein Icon. Im Web werden die so verwendet: Du sollst Font Dateien mit deiner Site verbinden, in CSS schreibst Du Regeln mit Selektoren, die für den Icons Inhalt wesentlich sind, class:
1 |
icon-home |
, kann das Icon “home” entsprechen.
Danach schreibst Du in HTML:
1 |
<span class="icon-home"> </ span> |
und das Icon home erscheint sich auf dem gewünschten Ort.
Vorteile
- Solche Icons skaliert/animiert man ohne Probleme (Icon Fonts sind Vektor)
- man kann leicht die große Icons-Sammlungen verwenden.
- Diese Icons sehen auf alle Geräte gut aus.
- Es ist problemlos die Icons auf der Seite platzieren (HTML Interaktionen.)
- Man kann die Farbe und Größe via CSS ändern.
- Shadow Icons kann man auch mit Hilfe von CSS3 ändern (in alte IE-Versionen nicht erbracht)
Nachteile
- Für die Icon-Vorschau muss man eine Webseite öffnen oder die bestimmte Software verwenden.
- Icons sind einfarbig.
- Die Verwendung im Grafik-Editor ist komplizierter.
- Ohne Optimierung gibt es im Font viele nicht genutzte Icons (die Dateigröße ist zu groß)
Jetzt schauen wir die Icon-Fonts noch näher. Unten gibt es eine Menge Ressourcen, wo man diese Design Goodies kostenlos herunterladen kann.
Auf alle Ressourcen gibt es verschiedene Icons-Sammlungen. Du kannst die gerne haben. Je nach Projekt benötigt man verschiedene Icons, deswegen sollst du Icons nach deinem Wunsch auswählen und danach auf den Download Button drücken.
