Schick und schlank: so verwendest du Icon Fonts

Icons lockern ein Design angenehm auf und helfen deinen Lesern dabei, sich intuitiv zurechtzufinden: das charakteristische „f“ erfasst man viel schneller als das Wort „Facebook“, und wenn unter deinem Artikel eine Sprechblase mit einer Zahl darin steht, ist klar, dass es sich um die Anzahl der Kommentare handelt.

Während solche Icons in der Vergangenheit in Photoshop & Co. als Grafiken erstellt und hochgeladen werden mussten, gibt es mittlerweile einen viel einfacheren und eleganteren Weg: Icons Fonts.
Das sind Schriftarten, die anstelle von Buchstaben aus vektorbasierten Symbolen bestehen. Du musst also nur ein Zeichen einfügen anstatt einer Grafik.

Live und in Farbe siehst du Icons Fonts hier im Blog an etlichen Stellen: das Kategorie-Icon, die Sprechblase bei den Kommentaren, das Kalendersymbol beim Datum und so weiter:

Vorteile von Icon Fonts

• Deine Webseite lädt schneller, da nur ein Zeichen statt einer Grafik geladen werden muss.
• Du kannst das Symbol unkompliziert austauschen.
• Die Farbe legst du einfach über die color-Angabe fest.
• Über font-size kannst du die Größe verändern, ohne dass das Icon pixelig wird.

Genericons & Font Awesome

Die wohl bekanntesten Icon Fonts sind Font Awesome und Genericons.
Beide darfst du kostenlos sowohl auf privaten, als auch kommerziellen Webseiten nutzen.

Genericons stammen von Automattic (der Firma hinter WordPress) und umfassen rund 120 Symbole.
Font Awesome wartet mit sogar über 30.000 Icons auf (einige davon in der Pro-Version, aber auch im kostenlosen Set wirst du für alle Lebenslagen fündig).

Welche von diesen Fonts du einsetzt (oder auch beide), hängt einfach davon ab, welche Icons du benötigst und welches Set dir besser gefällt.

Beide Schriften bindest du recht ähnlich ein, ich zeige das hier jetzt mal am Beispiel von Font Awesome.

Font Awesome einbauen

Lade dir Font Awesome als Zip-Archiv herunter, entpacke es und schiebe den fonts-Ordner auf den Server (wenn du WordPress nutzt, passenderweise nach wp-content/themes/deintheme/fonts).

Du kannst die Icons jetzt auf zwei Varianten einbauen:

1. Indem du im HTML ein zusätzliches Tag mit einer bestimmten Klasse einfügst (<span class="genericon genericon-instagram"></span>) und dieses über ein mitgeliefertes Stylesheet mit dem Icon versehen wird.
2. Indem du die Icons selber in deinem CSS über :before oder :after an der gewünschten Stelle einfügst.

Ich bevorzuge  den Weg über CSS, da du somit keine zusätzlichen Klassen im HTML erzeugen musst.

Dafür bindest du die Schriftart ganz zu Beginn deiner CSS-Datei ein:

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

(Gegebenenfalls musst du hier natürlich den Namen der Schriftart und das Verzeichnis anpassen.)

Als Beispiel setzen wir jetzt vor die Anzeige „x Kommentare“ ein kleines Sprechblasen-Icon.

Zuerst suchst du dir dafür auf der Übersichtsseite das passende Icon heraus, klickst es an und kopierst dir die ID. Für die Sprechblase wäre das die f075.

Guck dann im Quelltext deiner Seite nach, wie das umgebende Tag deiner Kommentaranzeige heißt. Es könnte etwa so aussehen:

<span class="comments-link">5 Kommentare</span>

Im CSS notierst du nun:

span.comments-link:before {
   font-family: 'FontAwesome';
   font-size: 16px;
   content: '\f075';
}

Vergiss nicht den Slash \ vor der ID.

Schon hast du dein Icon eingefügt! 🙂

Du kannst jetzt natürlich noch die Schriftgröße ändern, es über color einfärben oder ihm mit margin-right etwas Abstand zum Text verpassen.

Viel Spaß damit! 🙂