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:
- 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. - Indem du die Icons selber in deinem CSS über
:beforeoder:afteran 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! 🙂
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…
Bei FontAewsome hat man halt deutlich mehr Auswahl – wobei ich die Genericons teilweise schicker finde.
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.
Viel Erfolg beim Umziehen! 🙂
Wie gesagt – wenn du Hilfe brauchst bei den Permalinks, gib einfach Bescheid.
ich werd mich melden! 🙂 Werden am Wochenende wahrscheinlich erst mal mit dem Fotoblog beginnen. Wenn da beim Umzug was schief läuft, ist es nicht sooo tragisch.
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. 🙂
Pingback: Schick und schlank: so verwendest du Icon Fonts...
Ü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. 🙂
FontAwesome gehört bei mir seit gut 6 Monaten in alle WP Installationen rein. Die Jungs von MarketPress nutzen die auch. Wirklich praktisch.
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*
Ahh, ich wusste, da war doch noch was… nach solchen Buttons bin ich jetzt schon so oft gefragt worden, ich muss mich endlich mal drum kümmern! ^^
Danke für’s Teilen! <3
So, und schon sind die Buttons da! 😉
Perfekt!
Bei mir funktioniert es irgendwie nicht 🙁 ich weiß nicht was ich falsch mache, aber ich finde in meinem Quelltext nicht den Teil den du meinst :/
Liebste Grüße,
Sarah <3 von http://www.chicnbasic.blogspot.de
Hej,
wenn ich mir deine Seite so angucke, scheint es ja geklappt zu haben. 🙂
Vor dem Kommentar-Text ist die Sprechblase ja eingefügt.
Liebe Grüße
Oh echt? Bei mir sieht ist da eine komische Zahl 🙁 Aber wenn es geklappt hat, dann freut es mich! Danke!
Sarah <3
Mh, welchen Browser verwendest du denn?
Tut mir leid wenn ich jetzt hier so viele Kommentare hinterlasse, aber vielleicht hast du ja mal Zeit um dir das anzuschauen, wie es bei mir jetzt aussieht! 😀
Liebste Grüße,
Sarah <3 von http://www.chicnbasic.blogspot.de
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
Liebe Anne,
nach 2 Stunden hat es nun doch geklappt!
Bei mir musste es nun so heißen:
„ul.bottom-meta-inf li a:before“
Hallo Sarah,
super, dass es jetzt geklappt hat! 🙂
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
Hallo! Mir ist das alles grad noch ganz neu 🙂 Deshalb vlt die doofe Frage: Funktioniert das auch bei nicht selbstgehostetem WP-Blog?
Hallo Lorelai,
mh, soweit ich weiß, geht das bei wordpress.com nur, wenn du das kostenpflichtige Upgrade für Custom CSS durchführst.
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?