Schluss mit Pixelbrei: Icon-Fonts für Retina-Displays

Eine Technik, die im heutigen Webdesign immer geläufiger wird ist die Verwendung von sogenannten Icon-Fonts, eine eigne Schriftart, die nicht wie üblich aus Glyphen, sondern aus Icons besteht. Doch warum wird die Icon-Font immer beliebter, was sind die Vor- und Nachteile und wie erstellt man so eine Schriftart? 

Eine Icon-Font ist im Grunde genommen eine Schriftart, die anstelle von Glyphen Icons beinhaltet. Wirklich sehr grob vereinfacht kann man sagen, dass solch eine Schriftart wie die unter Windows bekannte „Webdings“ funktioniert. Aber dies soll nun bitte kein Beispiel für eine gute Icon-Font sein.

Vor- und Nachteile

Im Zeitalter von Retina Displays und sogar Smartphones mit 4k Auflösung sind frei skalierbare Icons unverzichtbar, da PNG Grafiken entweder wie ein Pixelbrei aussehen oder wegen der benötigten Größe die Website-Ladezeiten in die Höhe treiben. Zudem bietet die Icon-Font weitere Vorteile, auch gegenüber der Verwendung von SVG Grafiken. Im Gegensatz zu diesen kann nämlich die Farbe des Icons ganz einfach über einen CSS-Befehl, z.B. "color:#bad532" verändert werden. Bei verknüpften Vektor-Grafiken sieht die Sache schon komplizierter aus. Wenn der SVG-Code nicht direkt im Seitenquelltext steht, sondern in einer eigenen Datei, so muss für die Änderung der Farbe über CSS schon mal Javascript-Code her. Besonders lohnen tut sich eine Icon-Font bei vielen Icons. So muss der Browser beim Laden der Website nur eine einzige Datei abrufen anstelle von z.B. 30 SVG-Grafiken.

Einen Nachteil haben Icon-Fonts jedoch. Manche Browser halten die Schrift ziemlich hartnäckig im Cache. Das heißt, dass es schon mal komplizierter werden kann, wenn Sie Ihre Icon-Font aktualisieren. Bei geänderten Zeichen bleibt gerne mal das alte Icon bestehen und neu hinzugefügte werden nicht erkannt.

Erstellung

Das Erstellen einer Icon-Font ist kinderleicht. Am besten funktioniert dies über eines der Icon-Portale, die das erstellen einer Icon-Font anbieten. Ein bekannter Anbieter ist hier Flaticon. Suchen Sie sich einfach alle gewünschten Icons in Ihrer Collection zusammen und laden sie diese anschließend als eine Schriftart herunter.

Verwendung

Laden Sie alle Schriftdateien (.eot, .woff, . ttf, .svg) in den dafür gewünschten Ordner auf Ihrem Server hoch. Fügen Sie anschließend folgenden Code in Ihrer CSS-Datei hinzu:

CSS

@font-face {
  font-family: "Icons";
  src: url("./Icons.eot");
  src: url("./Icons.eot?#iefix") format("embedded-opentype"),
       url("./Icons.woff") format("woff"),
       url("./Icons.ttf") format("truetype"),
       url("./Icons.svg#Icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Icons";
    src: url("./Icons.svg#Icons") format("svg");
  }
}

Selbstverständlich müssen Sie im oben genannten Code den Namen Ihre Schriftart anstelle von "Icons" eintragen und den Pfad zu diesen richtig angeben.

Fügen Sie schlussendlich die Icons mittels des "content" Befehls über CSS auf Ihrer Website an gewünschter Stelle ein. Möchten Sie beispielsweise einem ein Icon hinzufügen könnte der Code hierfür folgendermaßen aussehen:

HTML

<span class=“arrow-right“>Weiterspan>

CSS

.arrow-right:before{
	font-family: 'Icons';
	font-size: 20px;
	font-style: normal;
	color: #bad532;
	content: "\f100";
}

Was halten Sie von der Verwendung von Icon-Fonts? Schreiben Sie Ihre Meinung in die Kommentare.