Es gibt immer wieder Diskussionen darüber, ob man kleine Symbole auf einer Webseite über einen Icon-Font oder besser über SVG-Grafiken einbinden sollte.
Icon-Fonts werden deshalb mit SVG-Grafiken auf eine Stufe gestellt, weil SVG ein Vektorformat ist und man diese Grafiken über CSS einfärben kann. Das kann man mit „normalen“ Pixelbildern (PNG, JPEG) nicht machen. Hier braucht man für jede Farbe ein eigenes Bild.
Bei der Entscheidung für oder gegen Icons-Fonts gibt einige Vor- und Nachteile abzuwägen. Ich fasse mal die Wichtigsten zusammen:
Nachteile Icon-Fonts
- Opera Mini kann keine Icon-Fonts darstellen
Opera Mini hat einen sehr hohen Marktanteil in Regionen, die keine gute Internet-Infrastruktur haben (Asien, Afrika). Seiten laden schneller, weil Opera Mini „überflüssige“ Daten ausblendet. Icon-Fonts, die über @font-face eingebunden sind, findet Opera Mini überflüssig. - Manche Browser (Chrome, Firefox) in manchen Versionen haben Rendering-Probleme.
Das heisst, die Symbole können unscharf aussehen.
Vorteile Icon-Fonts
- Über Standard-CSS integrierbar, keine Umbauten am HTML-Code notwendig
- Auch alte Browser (IE 7 und IE 8) können Icon-Fonts darstellen.
- Es müssen keine Fallback-Lösungen eingebaut werden.
Für SVG-Icons braucht man Fallback-Lösungen für ältere Browser
Schlussfolgerung
Jedes Projekt ist anders. Aber wenn man sich sicher ist, dass man auf Opera Mini verzichten kann, dann ist die Entscheidung für einen Icon-Font in Ordnung. Das Einbinden von Icon-Fonts geht schnell, man braucht keine Fallback-Lösungen und für das Styling über CSS braucht man kein Expertenwissen.
Der Umgang mit SVG ist deutlich anspruchsvoller und erfordert mehr KnowHow.
Dieser Artikel beschreibt ausführlich die Vor-und Nachteile beider Herangehensweisen:
Ten reasons we switched from an icon font to SVG