Icon-Fonts als Alternative zu Grafiken

2

Wie Sie eventuell schon bemerkt haben, habe ich verschiedene Bereiche meiner Webseite, z.B. die Navigation, mit Icons ausgestattet. Dabei helfen die Icons nicht nur, sich innerhalb des Menüs zurechtzufinden, sondern bieten auch einen optischen Anreiz, der einen User eventuell dazu bewegt, sich die Webseite näher anzusehen. In diesem Artikel möchte ich Ihnen zeigen, wie Sie solche Icons auf sehr einfache Weise verwenden können, ohne sich um die Performance der Seite Sorgen machen oder besondere CSS Kenntnisse besitzen zu müssen.

1) Nachteile von Hintergrundgrafiken

Üblicherweise werden Icons als Hintergrundgrafiken mithilfe von CSS eingebunden. Das hat aber verschiedene Nachteile, wie zum Beispiel eine geringe Flexibilität. Soll ein Icon hinzugefügt oder geändert werden, muss man sich zunächst im meist mehrere tausend Zeilen umfassenden Stylesheet zurechtfinden, das Icon über das Background-Attribut einbinden und unter Umständen noch Angaben zur Positionierung des Elements machen. Zudem besteht keine Möglichkeit, die Farbe eines Icons im Nachhinein zu beeinflussen oder gar Hover-Effekte anzuwenden. Ein weiterer großer Nachteil liegt darin, dass jedes Icon einzeln geladen werden muss, was die Anzahl der HTTP-Anfragen an den Server drastisch erhöht und die Seite somit länger benötigt, bis sie vollständig geladen ist. Zwar gibt es hier die Möglichkeit sogenannte CSS-Sprites zu verwenden, jedoch bleibt das Problem der geringen Flexibilität dadurch bestehen.

Das nächste Problem, das mit Icons einhergeht, die auf Hintergrundgrafiken basieren, betrifft die Skalierbarkeit. Zoomt man weit in eine Seite hinein, erscheinen Grafiken verpixelt (s. Bild unten).

2) Icon-Fonts als Alternative

Besser machen es sogenannte Icon-Fonts – Symbolschriftarten. Eine bekannte Schriftart dieser Gattung ist beispielsweise Windings unter Windows. Auch für Webanwendungen werden solche Schriftarten angeboten, die sich bei der Auswahl der Icons vor allem auf für das Web relevante Symbole beschränken. Ein Biespiel hierfür stellt zum Beispiel die Schriftart Font Awesome dar, die auch in meinem Theme zum Einsatz kommt. Die Vorteile dieser Methode liegen klar auf der Hand. Icons können verhältnismäßig einfach an verschiedene Stellen innerhalb der Seite eingefügt werden, ihre Farbe lässt sich beliebig wählen und dynamisch ändern. Zudem sind Icon-Fonts unendlich skalierbar, da es sich hierbei um Vektorgrafiken handelt.

Eine gerasterte Grafik verpixelt beim Zoomen.

Die Vektorgrafik ist unendlich skalierbar.

3) Einbindung und Verwendung der Icon-Font

Um Font Awesome in ihr Projekt oder Ihre Webseite einzubinden, laden Sie das Projekt-Verzeichnis unter der oben verlinkten Seite herunter und entpacken es. Kopieren sie das Verzeichnis “Font” in das Verzeichnis Ihres Projekts oder WordPress-Themes. Außerdem muss die font-awesome.css in das Verzeichnis übernommen und im Header verlinkt werden. Passen Sie gegebenenfalls den Pfad an.

<link rel="stylesheet" href="../css/font-awesome.css">

Nun ist die Icon-Font fertig eingebunden und steht zur weiteren Verwendung zur Verfügung. Um Beispielsweise das Briefumschlag-Icon anzuzeigen, müssen Sie folgendes HTML an der entsprechenden Stelle platzieren.

<i class="icon-envelope"></i>

Je nach Klassenbezeichnung wird ein anderes Icon angezeigt. Die Namen der Klassen finden Sie ebenfalls auf der Font Awesome Homepage neben den zugehörigen Icons.

Um wie in meinem Fall Icons in der Navigationsleiste anzuzeigen, können Sie im WordPress-Backend unter “Design” -> “Menüs” zusätzlich zum Namen eines Menüpunkts obigen Code (und eventuell ein Leerzeichen als Abstandshalter) einfügen. Das Icon wird schließlich in der Navigation angezeigt.

5) Fazit

Icon-Fonts stellen eine sehr gute Alternative zu Hintergrundgrafiken und CSS Sprites dar, wenn es um Icons geht. Die Einbindung erfolgt schnell und einfach, die Performance der Seite wird nicht beeinträchtigt und zudem sind Icon-Fonts sehr flexibel und passen sich auch größeren Zoomstufen auf beispielsweise Smartphones problemlos an. Wer eine große Anzahl an Icons auf seiner Webseite verwendet, wird daher nicht um die Verwendung einer Icon-Font herumkommen.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

2 Kommentare zu "Icon-Fonts als Alternative zu Grafiken"

  • [...] befindet sich an dieser Stelle ein Font-Icon. Nähere Informationen zu diesem Thema finden Sie hier. Sie können natürlich auch ein Hintergrundbild verwenden, das Sie über die CSS [...]

  • [...] In meinem Fall kommen hier sogenannte Font-Icons zum Einsatz, über dessen Gebrauch Sie hier mehr erfahren können. Alternativ können Sie auch ein einfaches Bild oder ein entsprechendes [...]