Icon Fonts für responsive Webdesigns

In Zeiten hochauflösender Displays – Retina beim iPad, demnächst 4k am PC – erscheinen traditionelle Bildschirmsymbole mit fixer Auflösung längst nicht mehr zeitgemäß. Wenn sie bei hohen Bildschirmauflösungen bzw. Pixeldichten einfach entsprechend hochskaliert werden, wirken sie gegenüber dem Hintergrund verwaschen und unscharf. Wenn dagegen die absolute Größe beibehalten wird, schrumpft die relative Größe irgendwann bis zur Unkenntlichkeit: Ein 256x256 Pixel großes Desktopicon mag bei 1920 mal 1080 Pixeln Auflösung noch gut erkennbar sein – auf einem 4k-Display (3840x2160) jedoch verschwindet es fast in der Weite des Desktops.
Seit einiger Zeit bereits gibt es allerdings eine elegante Lösung für dieses Problem, die besonders im Bereich des Responsive Webdesign längst überfällig war.

Fürs Responsive Webdesign unerlässlich: Icon Fonts

Icon Fonts verbinden die Aufgabe von Bildschirmsymbolen (die als Schaltflächen dienen) mit der freien Skalierbarkeit von modernen Schrifttypen. Während Bilder mit fixer Auflösung – und dazu zählen herkömmliche Desktopicons auch – bei immer stärkerer Vergrößerung immer mehr „ausfransen“ und verpixeln, bleiben Icon Fonts in jeder Zoomstufe stets gestochen scharf. Es handelt sich bei ihnen letztendlich um Vektorgrafiken, bei denen nicht einzelne Bildpunkte gespeichert werden, sondern die relativen Abstände von Eckpunkten, zwischen denen dann Verbindungslinien in Abhängigkeit vom Vergrößerungsfaktor gezeichnet werden.
Im Rahmen des Responsive Webdesign gibt es wohl keinen geeigneteren Ansatz, um größenunabhängige und frei skalierbare Symbole auf den Bildschirm zu bringen.

Die Vorteile der Icon Fonts – auf den Punkt gebracht:

• Stufenlos skalierbar und stets gestochen scharf („Retina-ready“)
• Plattformübergreifende Kompatibilität – auch für ältere Betriebssysteme und Browser darstellbar
• können leicht eingebunden werden
• lassen sich durch zusätzliche CSS-Effekte (Schattenwurf etc.) weiter optisch anpassen

Allerdings sind bei der Verwendung auch ein paar Einschränkungen zu beachten:

• die Auswahl an kostenlos nutzbaren, vorgefertigten Icon Fonts ist noch recht überschaubar
• Erstellen eigener Icon Fonts ist möglich, aber etwas umständlich (über Vektorgrafikprogramme lassen sich SVGs von Hand umwandeln)
• Über den CSS-Befehl @font-face müssen die Icon Fonts als weiterer Schriftsatz geladen werden

Kostenlose Icon Fonts unkompliziert einbinden – am Beispiel von Font Awesome

Font Awesome ist eine Sammlung von fast 500 Icon Fonts für alle erdenklichen Zwecke, die in einem Font zusammengefasst sind und kostenlos heruntergeladen werden können.
Obwohl es sich ursprünglich um ein Projekt für Bootstrap/Twitter handelte, lassen sich die „großartigen“ Icon Fonts problemlos in Webseitenprojekte via CSS oder LESS einbinden und anpassen – völlig ohne Einsatz von JavaScript.
Die Einbindung mittels CSS geschieht dabei folgendermaßen:

Schritt 1: Download von Font Awesome über die Projekthomepage

Schritt 2: Kopieren des Font-Ordners ins eigene Webseiten-Projektverzeichnis.

Schritt 3: Kopieren der Datei font-awesome.css ins Projektverzeichnis und Einbindung über den head-tag:

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

Schritt 4: Nun können die Icons durch Angabe der entsprechenden CSS-Klassen verwendet werden (eine Übersicht darüber findet sich ebenfalls auf der Font Awesome-Homepage).

Icons lassen sich auf unterschiedlichste Weise einbinden – vor einer Überschrift, als Button, als Aufzählungspunkte in einer Liste…die Möglichkeiten werden im Grunde nur durch die eigene Vorstellungskraft begrenzt.
Das User-Icon lässt sich etwa mit einer Zwischenüberschrift über den Verfasser des anliegenden Textes kombinieren:

<h3><i class="icon-user"></i>Über den Verfasser</h3>

Schnell und einfach lässt sich ein Icon über die CSS-Class icon-large eine Stufe (um ein Drittel) hochskalieren:

<h3><i class="icon-user icon-large"></i> Über den Verfasser</h3>

Weitere, mitunter auch komplexere Anwendungsmöglichkeiten (inkl. Code-Beispiele) sind auf der Font Awesome-Webseite ausführlich beschrieben. Und bei Problemen findet sich innerhalb der großen Community in der Regel schnell ein kompetenter Ansprechpartner.