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! 🙂

Anne Schwarz | Bloggerin

Anne Schwarz

Hey, ich bin Anne - Multipassionate, waschechtes Dorfkind, Pferdemädchen und Bloggerin aus Leidenschaft.

Ich blogge seit beinahe 20 Jahren und liebe es einfach. Hier auf der Bloghexe teile ich mit dir meine Tipps und Erfahrungen - damit auch dein Blog zauberhaft wird!

» mehr über mich & die Bloghexe

Dieser Beitrag wurde bereits 25mal kommentiert - was denkst du?

Lies weiter:

So kannst du Links schick gestalten

Ohne sie wäre das Internet nicht denkbar: Verlinkungen!

In diesem Tutorial erfährst du, wie du Links in HTML notierst und sie dann mit CSS gestaltest.

HTML & CSS – jetzt kannst du loslegen

Na? Juckt es dir in den Fingern, endlich deinen ersten eigenen Code zu tippen? 🙂Auf geht’s! Im ersten Teil meiner Einführung in das Thema HTML & CSS hast du ja schon erfahren, wofür du die beiden Sprachen benötigst und wie sie generell aufgebaut sind. Heute geht’s weiter mit dem zweiten Teil der Basics: wo gibst […]

25 Kommentare

  1. Ich find die Icons Fonts echt toll… Font Awesome kannte ich noch gar nicht – also gehört von ihr hab ich, aber nie angeschaut. Aber gerade eben. Werde wohl von Genericons wechseln…

  2. Font Awesome ist ja wirklich awesome. 🙂 Die sehen auch noch hübsch aus. Die werde ich dann wohl einbauen, wenn ich mit dem Blog umgezogen bin. Mal sehen, wann mein Freund das macht. Wahrscheinlich am Wochenende. Dann kann ich direkt auch mal die Permalinkstruktur irgendwie ändern.

  3. Danke für die schöne Anleitung. 🙂
    Ich habe mir ja tatsächlich Grafiken dafür hochgeladen, weil ich eh nur 5 oder so brauchte für meine Kategorien. Aber das Argument der kürzeren Ladezeit überzeugt mich.
    Ich werde mir wohl mal Genericons ansehen, weil es WP-„näher“ ist. 🙂

  4. Über font awesome bin ich letztens mal irgendwie gestolpert und hatte es „für später“ gespeichert. 😉
    Danke, dass du jetzt gleich mal erklärt hast, wie einfach das mit dem Einbau ist. Dann werden die Icons beim neuen Theme sicher ihren Platz finden. 🙂

  5. FontAwesome gehört bei mir seit gut 6 Monaten in alle WP Installationen rein. Die Jungs von MarketPress nutzen die auch. Wirklich praktisch.

  6. Richtig gut! Bin irgendwie nie auf die Idee gekommen, das ohne Grafiken zu handhaben! 😀 (Du brauchst irgendwie so „Teilen“-Button in deinen Posts. Weil ich will das hier jetzt teilen! *link manuell kopier*

  7. Hi Anne,

    vielen Dank für Deine immer sehr hilfreichen Anleitungen. Ich habe die Icons jetzt leider nur mit einem Plugin in mein Menü bekommen, aber funktioniert 😉

    Hast Du eventuell eine Idee, wie ich so ein Icon vor die Disqus-Kommentare bekomme? Ich habe alles ausprobiert, aber es will einfach nicht funktionieren.

    Viele Grüße

    Sarah

  8. Hallo Anne,

    im Moment bin ich dabei, meinen Blog neu aufzuziehen und arbeite mich gerade „im Hintergrund“ in WordPress.org ein. Mein Theme ist sehr einfach gehalten (da ich mich da nicht wirklich reinfuchsen kann), deshalb wären die Icons ein bisschen „Spielerei“, die ich gut gebrauchen kann. Hoffentlich schaffe ich es, sie einzubinden.

    Herzlichen Glückwunsch zum Taufzeugin-Dasein! Ich selbst habe auch ein Patenkind und bin absolut vernarrt in ihn 😉

    Ich fände es interessant, wenn du in deinem wöchentlichen Newsletter den Fortschritt beim eCourse erwähnen würdest. Aber generell muss ich sagen, ich mag deinen Newsletter sehr!

    Liebe Grüße,
    Fraencis

  9. Ich versuche es, doch irgendwie bekomme ich es nicht hin 🙁 Ich bin bei Blogger und finde so einen ähnliche 5 Kommentare nicht. Was mache ich falsch?

Schreibe einen Kommentar

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

Nichts mehr verpassen?

Abonniere meinen Newsletter, um über neue Inhalte benachrichtigt zu werden. Kostenlos & komfortabel direkt in deinen Posteingang! 🙂