Klein und scharf: Iconfonts

Dieser Artikel ist ursprünglich am 13. 11. 2012 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

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

Hat Dir der Artikel weitergeholfen?

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

2 Kommentare zu “Klein und scharf: Iconfonts

  • Super, ich liebe simple, intelligente Lösungen :o)

    „Um einzelne Zeichen aus einem Iconfont anzuzeigen, muss man ein bisschen in die HTML5-Trickkiste greifen. “

    Was wird dann in Browsern angezeigt, die HTML 5 noch nicht unterstützen?

    Viele Grüße
    Janine

    • Hallo, Janine,
      das data-attribut wird von allen modernen Browsern unterstützt. < a href="http://caniuse.com/#feat=dataset">Übersicht hier
      Der Internetexplorer ist allerdings ein Wackelkandidat, da hilft im Zweifelsfall nur ausprobieren.
      Die Methode von Font Awesome funktioniert allerdings bis runter zum IE8.
      Du kannst im Prinzip allen, auch sehr alten, Browsern HTML5 beibringen, wenn Du Tools wie Modernizr einsetzt.

      Schöne Grüße von Kirsten

Die Kommentare sind geschlossen.