Icon Fonts als Alternative zu herkömmlichen Icons

Themen dieses Artikels im Überblick

Zur Zeit floriert das Geschäft mit mobilen Geräten wie Smartphones und Tablets.
Die Vielfalt der Bildschirmgrößen und Auflösungen nimmt damit immer weiter zu und flexible Web-Kreationen liegen stark im Trend.

Ich möchte heute eine Möglichkeit zeigen, wie sich Symbole und Icons mit Hilfe von Icon Fonts ganz einfach in Webseiten einbinden und formatieren lassen.

Was sind Icon Fonts?

Anstelle von Schriftzeichen bilden Icon Fonts Piktogramme ab. Je nach Icon Font sind den einzelnen Zeichen oder Zeichenkodierungen unterschiedliche Piktogramme zugeordnet.
Die Palette reicht von geläufigen Websymbolen über Social-Media-Icons bis hin zu Piktogrammen für Verkehr, Haushalt und Tiere.

Vorteile bei der Verwendung von Icon Fonts:

  • Skalierung in Abhängigkeit zur Auflösung
  • Einfache Anpassung und Änderung der Icon-Formatierung
  • Leichte Positionierung der Icons
  • Optimal für responsive Webdesign

Die Aufzählzeichen der obigen Liste werden auch mit Hilfe einer Icon Font dargestellt. ;)

Allgemein zur Verwendung von Schriftarten im Web

Mittels CSS können beliebige Schriftarten (auch Icon Fonts) für ein Webseitenelement festgelegt werden.

Selektor {
 font-family: Schriftart, Schriftart 2 ;
}

Die zuverlässige Anzeige der jeweiligen Schrift setzt allerdings voraus dass der Browser diese Schriftart auch kennt. Wann beherrscht ein Browser eine Schriftart?
1) Wenn die Schriftart im Computersystem, auf dem der Browser läuft, installiert ist.
2) Wenn die Schriftart auf einem Webserver gehostet wird, auf den der Browser zugreifen kann.

Variante 1) schränkt den Gebrauch individueller Schriftarten stark ein. Kaum ein System beherbergt die Menge an Schriften, die heute im Web Verwendung finden.

Variante 2) hingegen ist die moderne, saubere und zuverlässige Lösung. Hierbei gibt es zwei Optionen wo Schriften gehostet sein können:
a) Auf einem eigenen Server.
b) Auf einem fremden Server (wie z.B. bei Google Web Fonts).

So werden Schriften, die auf einem Server liegen, über CSS eingebunden:

  • Separates Einbinden der benötigten Schriftformate (z.B. .eot, .tff, .woff, .svg)
@font-face {
 font-family: 'Schriftart';
 src: url(Dateipfad zur Schriftart im Format 1) format('Schiftformat1'),
      url(Dateipfad zur Schriftart im Format 2) format('Schiftformat2');
}
  • Einbinden einer Schriftart über eine URL:
@import url(URL);

Achtung: Schriftarten, die über CSS oder eine andere Methode eingebunden werden, müssen bei der Vergabe als Wert immer in einfachen Anführungszeichen (' ') stehen.

Google Web Fonts

Google selbst hostet bereits unzählige, freie Schriftarten auf seinen Servern und bietet über den Service Google Web Fonts jedem die Möglichkeit, diese über @import url( ); auf der eigenen Webseite einzubinden. Vorteil: Die Schriftarten sind bereits in die passenden Schriftformate konvertiert und auf Webservern gehostet.
Für die Einbettung der Google-Schriften gibt es auf der Seite noch einmal eine separate Anleitung. Unter anderem auch für die Einbindung via Header-Tag oder Javascript.

Doch es sind bei weitem nicht alle existierenden Schriftarten über Google Web Fonts verfügbar – teils aus urheberrechtlichen, teils aus anderen Gründen. Auch Icon Fonts gibt es in den Google Web Fonts bisher nicht.

Quelle für Icon Fonts

Die Plattform WeLoveIconFonts hostet – wie Google – Schriftarten und stellt sie zur freien Nutzung zur Verfügung. Das besondere: Es werden ausschließlich Icon Fonts angeboten. Bisher stehen acht schöne Symbol-Schriften zur Auswahl.

Die Einbindung erfolgt hier ebenso über CSS mit:

@import url(http://weloveiconfonts.com/api/?family=Schriftart);

Abbildung von Icons und Symbolen mit Hilfe von Icons-Fonts

Um ein Icon aus einer Symbol-Schrift vor, nach oder innerhalb eines HTML-Elementes anzuzeigen bedient man sich CSS-Klassen oder CSS-Pseudoelementen. Die Icon Fonts können dann wie reguläre Schriftenarten formatiert werden. Obligat ist natürlich die Angabe der Eigenschaft font-family.

WeLoveIconFonts vergibt an jedes Symbol einer Icon Font eine Klasse nach dem Schema: SchriftnameSymbol. Für das Twitter-Icon aus der Schrift Entypo existiert also die Klasse class="entypo-twitter". Für jedes Symbol einer Schriftart ergibt sich somit eine eigene Klasse. Um die Formatierung zu erleichtern können aber alle Symbole der jeweiligen Icon Font mit Hilfe des folgenden Selektors zusammengefasst werden: [class*="Schriftname-"].

Kennt man das Tastaturzeichen bzw. die Zeichenkodierung für ein bestimmtes Symbol einer Icon Font, so kann dies auch direkt als Text verwendet werden. Zur Formatierung wird dann nur eine normale Klasse mit der entsprechenden Eigenschaft font-family benötigt.
Beispielsweise ergibt folgende nummerische Zeichenkodierung in der Schriftart Entypo das Twitter-Icon :

HTML:
<span class="entypo">&#62217;<span>

CSS:
.entypo {font-family: 'entypo';}

Ein Blick in den Code oder auf die Schriftart-Webseite verrät meist das richtige Zeichen bzw. die richtige Zeichenkodierung. ;)

Um Symbole vor oder nach bestimmten Elementen abzubilden empfiehlt sich der Einsatz der CSS-Pseudoelemente :before oder :after.
Über die Eigenschaft content kann das gewünschte Symbol eingefügt und über font-family die richtige Schriftart zugeordnet werden:

Selektor:Pseudoelement {
 content: 'Zeichen oder Zeichenkodierung';
 font-family: 'Schriftart';
}

Links und Quellen zum Thema

Archiv für Google Web Fonts: http://www.google.com/webfonts
Archiv für Icon Fonts: http://weloveiconfonts.com
Webseite der Schriftart Entypo: http://entypo.com
Artikel zum Einbinden selbst-gehosteter Schriften via @font-face: http://css3-html5.de/css3-web-fonts

Beitragsinfos

Veröffentlicht am 30. Januar 2013
Artikel teilen:

Weitere Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert