Icon Fonts 101

Icon-Fonts sind Schriftarten, bei denen die Glyphen — normalerweise Buchstaben und Zahlen — durch bildhafte Symbole ersetzt werden. Anstatt den Buchstaben „A" darzustellen, zeigt eine Icon-Font ein Haus-Symbol, eine Suchlupe oder einen Einkaufswagen.

Da die Icons in einer Schriftdatei gespeichert sind, verhalten sie sich genau wie Text. Sie können sie mit font-size auf beliebige Größen skalieren, ihre Farbe mit color ändern, Textschatten hinzufügen, CSS-Übergänge anwenden und sie sogar animieren — ohne eine einzige Bilddatei anzufassen.

Dieser Ansatz bietet mehrere praktische Vorteile:

• Auflösungsunabhängigkeit — Vektorkonturen skalieren auf jeder Bildschirmdichte scharf
• Geringes Dateigewicht — eine komprimierte Schriftdatei ersetzt Dutzende einzelner Bild-Assets
• CSS-Kontrolle — Farbe, Größe, Schatten, Deckkraft und Hover-Zustände sind mit Text-Styling kostenlos
• Einzelne HTTP-Anfrage — das gesamte Icon-Set wird in einem einzigen Netzwerk-Roundtrip geladen

In den frühen Tagen des Webs stützten sich Entwickler auf einzelne Bilder oder CSS Image Sprites — große Composite-Bilder, bei denen jedes Icon einen festen rechteckigen Bereich belegte. Sprites reduzierten HTTP-Anfragen, waren aber fragil: Das Hinzufügen oder Skalieren eines Icons erforderte die Neuerstellung des gesamten Sprite-Sheets und die manuelle Aktualisierung der Pixelversätze.

Um 2012 popularisierten Projekte wie Font Awesome und IcoMoon eine elegantere Alternative: Icons als Schriftglyphen verpacken, die auf den Private Use Area von Unicode abgebildet werden. Designer konnten ein komplettes Icon-Set austauschen, indem sie eine einzige @font-face-Deklaration änderten, und Entwickler konnten Icons mit demselben CSS gestalten, das sie bereits für Text verwendeten. Die Technik verbreitete sich schnell und bleibt eine zuverlässige, ressourcenschonende Wahl für Design-Systeme, die einfarbige Icons verwenden.

Die Debatte „Icon-Fonts vs. Inline-SVG" ist seit über einem Jahrzehnt ein fester Bestandteil von Front-End-Diskussionen. Beide Ansätze sind gültig — die richtige Wahl hängt von den Anforderungen Ihres Projekts ab.

Icon-Fonts

• Einzelne HTTP-Anfrage — eine Schriftdatei liefert alle Icons
• Einfachstes CSS-Styling — ändern Sie color, font-size und text-shadow wie bei jedem Text
• Nur monochrom — jede Glyphe unterstützt eine einzige Füllfarbe
• Einfache Integration — Stylesheet-Link hinzufügen, CSS-Klasse verwenden, fertig

Inline SVG

• Mehrfarbig — jeder Pfad kann seine eigene Füllung, Kontur oder seinen eigenen Farbverlauf haben
• Standardmäßig zugänglich — <title> und aria-label geben Screenreadern echte Semantik
• Einzeln cachebar — nicht verwendete Icons werden nie heruntergeladen
• Detailkontrolle — einzelne Pfade animieren, Filter pro Element anwenden

SVG-Sprites

• Kombinieren mehrere SVGs in einem einzigen <symbol>-Sprite-Sheet
• Icons referenzieren mit <use href="#icon-name">
• Bietet die Vorteile beider Ansätze — einzelne Anfrage, mehrfarbig, zugänglich — erfordert jedoch eine aufwändigere Build-Pipeline

Icon-Fonts können in fünf Dateiformaten verpackt werden, jedes mit unterschiedlicher Komprimierung, Browser-Unterstützung und Anwendungsfällen. Hier ein Überblick auf einen Blick:

Unsicher, welche Formate Sie einschließen sollen? Nutzen Sie diesen praktischen Entscheidungsleitfaden:

• Wenn Sie nur eines wählen — verwenden Sie WOFF2. Es bietet die beste Komprimierung (Brotli) und deckt 97 %+ der Browser ab.
• Wenn Sie IE 11-Unterstützung benötigen — verwenden Sie WOFF2 + WOFF. WOFF übernimmt die verbleibenden Browser, die keine Brotli-Dekodierung unterstützen.
• Wenn Sie IE 8-Unterstützung benötigen — verwenden Sie WOFF2 + WOFF + EOT. EOT ist das einzige Format, das Internet Explorer 6-8 versteht.
• Für Desktop-Anwendungen — verwenden Sie TTF. Es ist das native Format für das Schrift-Rendering auf Betriebssystemebene unter Windows, macOS und Linux.
• Zum Debuggen von Schriftproblemen — prüfen Sie die SVG Font. Ihre XML-Struktur ist für Menschen lesbar, was die Überprüfung von Glyphenpfaden und Metadaten erleichtert.

Tauchen Sie tiefer in jedes Format ein, um seine Interna, Browser-Kompatibilität und Best Practices zu verstehen:

Erfahren Sie, wie Sie diese Formate in Ihren Projekten einsetzen: