Nach Dingbats

Dass Buchstaben und Ziffern für die schriftliche Kommunikation nicht ausreichen, haben spätestens Emoticons offenbart. Wer Unicode nutzt, kann einen weit über den gemeinen Smiley hinausreichenden Vorrat an Zeichen und Bildern nutzen: sogenannte Icon Fonts.

Lesezeit: 6 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen
Von
  • Henning Behme
Inhaltsverzeichnis

Schriftexperten dürften sich an den Font Zapf Dingbats erinnern, den Hermann Zapf 1978 kreiert hatte. Statt Buchstaben enthielt die Schrift Pfeile, Kreuze, weitere Symbole und kleine Bilder. Im Webzeitalter, das liegt nahe zu denken, muss es schlicht so sein, dass es zig solcher Schriften gibt und Webdesigner sie nach Belieben einsetzen können. Glück gehabt, stimmt. Dank CSS und einiger frei erhältlicher Icon-Sammlungen in verschiedenen Formaten.

Schon Unicode als Zeichensatz enthält eine Menge an Zeichen, die weder Buchstaben noch Ziffern sind. Dazu gehören Piktogramme wie Schachfiguren, Musik- und Tierkreiszeichen sowie Währungs-Logos und Spielkartenfarben, die zwischen U+2600 und U+26FF liegen (PDF) – Wikipedia stellt die Unicode-Blöcke übersichtlich dar. Daran schließt sich Dingbats an, die genannte von Zapf entworfene Schrift, die sich großer Beliebtheit bei Setzern und ihren Nachfolgern erfreute. Seit Version 1.1 enthält Unicode den Dingbats-Block (PDF), von U+2700 bis U+27BF. Diese Zeichen kann, wer mit UTF-8 arbeitet, ebenfalls verwenden. Allerdings gehen ein paar der freien Sammlungen deutlich über das Unicode-Angebot hinaus, indem sie beispielsweise Zeichen für Twitter, Facebook, Google+ und andere neue Symbole bieten.

Zac McCormick beispielsweise hat in Symbola zusammengefasst, was andere Designer schon zu dem Icon Set Maki (Mapbox), dem des American Institute of Graphic Arts (AIGA) und dem des National Park Service zusammengestellt hatten. Herausgekommen ist ein vor allem für Landkarten gedachter Icon Font. Andere nutzen für ihre „Bilderschrift“-Sammlung den Unicode-Bereich U+E000 bis U+F8FF, der offiziell die Private Use Zone bildet und ausdrücklich dafür vorgesehen ist, dass Anbieter und Leser sich über die dort definierten Zeichen einigen. Für Linux enthält der Bereich ab U+F000 spezielle Zeichen wie das Windows- und das Apple-Logo.


Manche Mac-Icons unter den „verschiedenen Symbolen“ sehen luxuriös aus, erlauben allerdings keine CSS-Farbzuweisung; Windows- und Linux-Nutzer sehen nur den Zeichenwert (Abb. 1).

Alle Sammlungen eint, dass sie Schriften und nicht Grafiken beinhalten. Das heißt, Webentwickler und -autoren können die dort definierten Zeichen per CSS an ihre Display-Wünsche anpassen. Allerdings in Grenzen, denn die verspieltesten Umsetzungen verbieten gelegentlich genau das; das gilt beispielsweise für den Fußball, die Wolke und das Golf-Loch in Abbildung 1 auf dem Mac.

Dummerweise heißt die Existenz der verschiedenen Symbole als „ganz normaler“ Unicode-Block noch lange nicht, dass diese Zeichen auf allen Systemen erscheinen. Abbildung 2 offenbart, dass der Mac zwar viele Zeichen inklusive der schließenden grafischen Anführungszeichen kennt, nicht aber die öffnenden – wie ein Yang ohne Yin. Und weder Windows noch Linux können mit dem Luxus-Fußball, der Wolke samt Sonne oder dem Golfloch in Abbildung 1 etwas anfangen. Wer demnach Unicode-Icons nutzen will, sollte tunlichst mindestens auf den drei genannten Systemen prüfen, ob das gewählte Zeichen vorliegt.

Ohne öffnende Anführungszeichen (zweites von rechts) nutzt das schließende Mac-Nutzern leider nichts (Abb. 2).

Solche Prüforgien erübrigen sich, wenn man gesonderte Icon Fonts nutzt. Sie besetzen die Unicode'sche Private Use Zone; dort deponieren sie die neuen Zeichen, und da diese innerhalb einer Schrift definiert sind, können alle Systeme sie darstellen. Die Schrift wiederum liegt jeweils als Embedded Open Type (EOT), True Type, SVG und WOFF vor, und eine einzubindende CSS-Datei enthält die notwendigen Verweise.


Font Awesome, Ligature Symbols und Genericons (von oben nach unten) enthalten allesamt Zeichen für Facebook, Twitter und so weiter. Die Farben können die Webautoren zuweisen (Abb. 3).

An drei frei erhältlichen Icon-Schriften (zu mehr siehe die Artikel "HTML for Icon Font Usage" und " Icon-Fonts: 12 kostenlose Schriftarten für dein Projekt") sei kurz demonstriert, was zu tun ist: Font Awesome, Genericons und Ligature Symbols. Alle drei Schriften enthalten interessante Grafik-Sets, wobei Genericons eher bescheiden daherkommt, während die beiden anderen eine umfangreiche Zeichensammlung bieten. Hier seien Navigationsbalken mit den sozialen Netzen und Anwendungen nebeneinander gestellt (siehe Abbildung 3).

Genericons (unten) erfordert es, eine CSS-Datei einzubinden, die wiederum über @font-face {…} auf die zu nutzenden Schriften verweist und die Benennungen für die einzelnen Zeichen enthält, etwa

.genericon-facebook:before { content: '\f203'; } 

für Facebook. Das Zeichen U+F203 beinhaltet demnach das Facebook-F. Der Listingkasten zeigt den HTML-Code für den Navigationsbalken mit Genericons. Die Klassenzuweisung innerhalb des span-Elements bewirkt, dass der Browser vor dem leeren Inhalt des Elements das Facebook-Zeichen einblendet (genericon-facebook, siehe oben) und es nach der Regel genericons behandelt; unter anderem, indem font-family: 'Genericons'; darin die Icon-Schrift vorsieht. In diesem Fall kommt zusätzlich die Klasse blau zum Tragen, die lediglich die Schriftfarbe setzt.

Mehr Infos

Listing: Navigationsbalken mit Genericons-Icons

<nav role="navigation">
<ul class="navigation_news">
<li><a href="https://www.facebook.com/ix.magazin" title="iX Facebook"><span class="genericon genericon-facebook blau"></span></a></li>
<li><a href="https://plus.google.com/+IxDeutschland" title="iX Google+"><span class="genericon genericon-googleplus rot"></span></a></li>
<li><a href="http://twitter.com/#!/ixmagazin" title="iX Twitter"><span class="genericon genericon-twitter seeblau"></span></a></li>
<li><a href="http://www.heise.de/news-extern/news.html#ix" title="iX RSS-Feeds"><span class="genericon genericon-feed orange"></span></a></li>
</ul>
</nav>

Für die beiden anderen Icon Sets sieht die Navigation nicht nur gleich aus, die Codierung des span ist ebenfalls fast identisch:

<!-- Font Awesome --> 
<span class="fa fa-facebook-square blau">  </span> 
<!-- Ligature Symbols --> 
<span class="lsf-icon facebook blau"></span> 

Genericons und Font Awesome liefern eine CSS-Datei mit, die die Zuweisungen für die einzelnen Zeichen beinhaltet. Für die Arbeit mit den Ligature Symbols muss man die gewünschten Regeln selbst in die CSS-Datei eintragen, beispielsweise

.lsf-icon.facebook:before { content: '\E047'; } 

Die Webseite führt sämtliche Zeichen samt Unicode-Wert auf. Bei Font Awesome liegt ein sogenanntes Cheat Sheet vor, das eine Übersicht über Icons und Code enthält. Die Genericon-Webseite erlaubt es, sich den CSS-Code anzusehen und zu kopieren.

Ein mit der IcoMoon-App erstellter Icon Set, der nur elf Zeichen umfasst (Abb. 4)

Wer einen eigenen Icon Set nutzen will, muss entweder selbst eine Schrift entwerfen oder sich einen Satz Grafiken zusammenstellen, wie es die IcoMoon-App erlaubt. Nach dem Aufruf der Website icomoon.io reichen ein paar Klicks und der erste Zeichensatz liegt nach dem Download auf dem eigenen Rechner vor (siehe Abb. 4). Die Klassenzuweisung ist sogar noch knapper als bei den anderen Sets:

<span class="icon-headphones oliv"></span> 

Gleich, ob selbst gemacht oder lieber per Fertigware: Grafische Zeichensätze, die das Styling nach den eigenen Vorgaben erlauben, können Webmaster leicht in den eigenen Server integrieren und Webautoren ebenso komplikationsfrei in ihren Dokumenten verwenden.

Alle Links: www.ix.de/ix1402136 (hb)