ikoo Icon Font

Die Nutzung von Icon Fonts anstatt grafischer Icons – schreibst du schon oder malst du noch?

Ein weit verbreitetes Gestaltungsmittel auf sehr vielen Webseiten sind Icons – sei es in der Navigation, in Buttons, anstatt von Text-Links, oder natürlich vor allem natürlich als schnell wieder zu erkennende Verknüpfungen und Links zu den bekannten Sozialen Netzwerken wie zum Beispiel Twitter, Facebook oder Google+. Dafür werden für üblicherweise kleine Grafiken eingebunden, die dann vom Browser des Besuchers entweder einzeln oder als etwas performantere Variante zusammen in CSS Sprites geladen werden.

Eine sehr viel schönere, schnellere, und in vielen Projekten passende Möglichkeit der Darstellung von Icons ist die Nutzung von so genannten Icon Fonts anstelle von starren Grafiken. Dies sind Fonts, die entweder größtenteils oder komplett aus Symbolen bestehen. Diese Icon Fonts werden in CSS mittels @font-face eingebunden und können dann wie jeder andere Font auch in den Webseiten genutzt und per CSS gestyled werden. Aber dazu später mehr…

Vorteile

Performance

Einer der wichtigsten Vorteile liegt natürlich klar auf der Hand. Durch die Nutzung von Fonts anstatt von Grafiken kann in vielen Fällen einiges an Performance gespart werden. Oftmals ist ein solcher Font fast kleiner als nur ein oder zwei größere Icons und wird natürlich genau wie Grafiken auch vom Browser gecached. Überlegt allein mal, wie viele Connections der Browser für eine in vielen Blogs übliche Leiste mit grafischen Social Media Icons aufbauen muss. Je nach Anzahl der Icons werden das ganz schnell 5-10 Connections. Und für einen Font? Richtig! Der Font wird genau einmal geladen.

Im Browser skalierbar

Wie bei jedem anderen Font, kann auch die Größe der für die Icons verwendeten Schriftarten im Browser durch den Nutzer beliebig angepasst werden (z.B. per Browserkonfiguration, mittels Tastenkombinationen wie Strg+/Strg- oder Strg + Mausrad)

Styling per CSS

Mittels CSS (und vor allem mittels CSS3) sind den Möglichkeiten der Gestaltung der Icons natürlich kaum Grenzen gesetzt. Nicht nur können Größe und Farbe stufenlos angepasst werden ohne jemals irgendwelche Pixel zu sehen, man denke nur mal an Features wie CSS-Animationen, Hover Effekte, Verläufe, Schatten, usw. So können aus den Fonts wirklich komplexe Icons werden. Einige Beispiele folgen noch.

Die Anwendung

Die Einbindung und Nutzung der Icon Fonts in Web-Projekten ist für den halbwegs geübten Webdesigner wirklich einfach. Spielen wir das Ganze einmal anhand eines einfachen Beispiels mit dem Web Symbols Font durch.

Zu allererst muss der Font natürlich mittels @font-face ins CSS eingebunden werden. Dies machen wir zur Sicherheit mit verschiedenen Dateiformaten, um so die Kompatibilität zu allen gängigen Browsern sicher zu stellen. Keine Angst, geladen wird am Ende vom Browser nur jeweils eine Variante.


@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('/fonts/websymbols-regular-webfont.eot');
    src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('/fonts/websymbols-regular-webfont.woff') format('woff'),
        url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
        url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}

Jetzt können wir beginnen, unser Icon zu gestalten. Ich nehme dafür einfach mal das Slash ‚/‘, welches in in diesem Font ein Häkchenen mit Hintergrund darstellt.


<div class="icon">
    <span class="haekchen">/</span>
</div>

Und schon können wir beginnen, mittels CSS aus dem Slash ein einfaches Icon zu zaubern.


.icon .haekchen {
    font-family: 'WebSymbolsRegular';
    font-size: 100px;
    color: #555;
}

Mit einigen kleinen weiteren CSS-Spielereien, wie zum Beispiel einem text-shadow und einigen CSS transitions, wird daraus ganz schnell etwas in der Form:

/

Das ist wirklich nur ein einfaches (absichtlich etwas in der Größe übertriebenes) Beispiel. Mit etwas mehr Aufwand lässt sich daraus natürlich noch einiges mehr zaubern.

Einige Icon- und Symbol-Fonts

Just Be Nice Web symbols typeface

Ein kostenfreier Font, bestehend aus 78 Symbolen inklusive der wichtigsten Socialen Netzwerke (z.B. Google+, Twitter, Youtube, Facebook, Tumblr, Vimeo, usw.)

ikoo

ikoo Icon Font

Notice

notice Icon Font

Fico

Ein kostenpflichtiger Font (19,- €), bestehend aus 52 Zeichen.

fico Icon Font

Ich bin gespannt darauf, diese Technik bald in dem einem oder anderem eigenem Projekt zu nutzen. Vieleicht hat ja jemand sogar das eine oder andere Beispiel von Webseiten, die Font-Icons geschickt einsetzen zur Hand?

Update 23.11.2011
Bitte achtet auch bei dieser Technik auf die Lizenzen der verwendeten Fonts. Fonts, die zum Beispiel mit Microsoft Betriebssystem ausgeliefert werden, sind teils nur für die Nutzung innerhalb dieser EINEN Installation lizensiert. Also: am besten entweder freie Fonts oder für diesen Zweck gekaufte und lizensierte Fonts verwenden! Dann sollte nichts schief gehen.

Themeforest WordPress Themes

7s Kommentare zu “Die Nutzung von Icon Fonts anstatt grafischer Icons – schreibst du schon oder malst du noch?”

    • Genial ja, ABER…

      1. Für die Icons ist kein Semantischer Wert vorhanden.
      2. Brauche ich nur ein oder 2 Icons sollte man den Gebrauch der Webfont und des damit verbundenen Aufwands gegenrechnen und auch die verbrauchte Bandbreite checken. Wenn die Icons zusammen weniger oder gleich viel KB haben, kann man auch auf Sprite-Images umstellen.

      Antworten
  1. Leider kann ich die Schrift bei mir nicht über die CSS einbinden. Das hatte bei den Google Fonts schon nicht funktioniert, diese habe ich über den Header eingebunden. Nun weiß ich aber nicht wie ich eine Schrift, die auf meinem eigenen Webspace liegt über den Header einbinden kann. Kannst du mir da helfen?

    Antworten
    • Hallo Luigi, dafür ist @font-face (der erste Code-Schnipsel) da.
      Diesen ganz oben ins CSS (nicht in den Header) und natürlich die Pfade und Datei-Namen entsprechend anpassen.

      Antworten
  2. @@Chris Natürlich, da hast du Recht. Wenn ich nur 10 Icons habe und diese zusammen ~ 50 KB haben, dann muss ich keine Icon-Font laden.

    Ich frage mich warum Frameworks wie jQuery (UI) nicht auf die Icon-Fonts zurückgreifen, sondern mit Sprites arbeiten. jQuery UI hat ja bei jedem Download die ganze Iconpalette dabei.

    Antworten

Hinterlassen sie einen Kommentar

XHTML: Folgende HTML-Tags können verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>