Webdesigner arbeiten gern mit Symbolen. Eine kleine Lupe im Suchfeld, ein Pfeil, ein Warenkorbsymbol. Jedes dieser Symbole ist ein Bildelement, das entweder per image-Tag oder per CSS (background-image) eingebunden wird.

Diese Bildchen sind in der Regel sehr klein, nur ein paar Kilobyte gross. Dadurch fallen sie beim Laden der Seite kaum ins Gewicht. Naja, bisher war das so. Denn damit die Icons auf den neuen, hochauflösenden Displays nicht pixelig aussehen, sollte man solche Bilder in höherer Auflösung hinterlegen.
Ein Icon, das auf einer Fläche von 32×32 Pixel dargestellt wird, muss also doppelt so groß sein (64x64Pixel) um auf einem Retina-Bildschirm noch scharf auszusehen. Damit steigt die Datenlast, denn die Dateien sind auf einmal gar nicht mehr so klein.

Buchstabe statt Bild

Für dieses Problem gibt es eine sehr elegante Lösung, die kaum Eigengewicht hat: Iconfonts. Das sind Schriften, die aus kleinen Symbolen bestehen. Sie sind gewissermaßen die Dingbats-Fonts für’s Web.

Wenn man so einen Font per CSS in den Code der Website einbindet, wird anstatt einer Grafik nur ein Buchstabe aufgerufen. Die Vorteile dieser Methode sind eindrucksvoll:

  • Alle Icons sind per CSS frei skalierbar, auch nach oben
  • Die Icons können jede beliebige Farbe annehmen (per CSS)
  • Man kann alle möglichen CSS-Effekte anwenden (Deckkraft, Rotation, Schatten etc.)
  • Die Icons sind immer scharf, auf jedem Display

Wie das aussieht, könnt Ihr Euch auf dieser coolen Demoseite bei CSS-Tricks anschauen.

Iconfont einbinden

Der Iconfont wird auf den Server geladen, auf dem die Webseite liegt, die Schrift wird per @font-face in die CSS-Datei eingebaut.

Um einzelne Zeichen aus einem Iconfont anzuzeigen, muss man ein bisschen in die HTML5-Trickkiste greifen. Konkret brauchen wir hier das data-Attribut, mit dem man zum Beispiel einen Link um ein Symbol-Buchstaben erweitern kann.
Das folgende Beispiel platziert vor dem Linktext noch ein kleines Symbol. Der Icon-Font „Pictos“ macht aus dem Dollarzeichen ein Warenkorbsymbol.

<a href="#" data-icon="$">Ein Linktext</a>
[data-icon]:before {
	font-family: 'Pictos Custom';
	content: attr(data-icon);
}

Im Browser sieht das dann ungefähr so aus:


Quelle Icon: pictos.cc

Jon Hicks erklärt das sehr ausführlich in seinem Artikel bei 24ways.org

Die Jungs von Twitter Bootstrap haben die Handhabung von Iconfonts mit ihrem Projekt „Font Awesome“ sehr stark vereinfacht. Dank ihrer Methode kann man die einzelnen Symbole per CSS-Klasse platzieren.

Browser-Kompatibilität

Iconfonts werden von allen Browsern problemlos dargestellt, von den üblichen Renderingproblemen einmal abgesehen. Für Screenreader kann man zusätzlich einen Text angeben, der in der normalen Browseransicht ausgeblendet wird.

span.screen-reader-text { 
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Quelle: HTML for Icon Font Usage (CSS-Tricks)

Iconfonts zur kostenlosen Nutzung

Font Awesome

Foundation Icon Fonts

Iconic

Entypo