Icon-Fonts sind seit einer längeren Zeit ein wichtiges Stilmittel geworden um auf den Websites Bereiche hervorzuheben und optisch aufzulockern. Daher war es naheliegend, dass ich auch hier auf dieser Website Fonticons einsetzen würde. Die Frage die zu beantworten war: welche Icon-Sammlung wird zum Einsatz kommen?
Der bekannteste Vertreter in diesem Segment ist Font Awesome. Dieses Icon-Font verfügt momentan über 420 Icons. Alleine im letzten Update sind 420 neue Zeichen hinzugekommen:
Will man solche Icons zum Beispiel in Backend eines CMS einbinden, dann ist das eine interessante Alternative um für viele Einsatzzwecke ein passendes Zeichen bieten zu können. Möchte man aber wie ich lediglich maximal ein dutzend Icons zurückgreifen, dann ist das einfach zu viel des Guten. Viele Icons verursachen eine große Schrift-Datei und auch die CSS-Datei ist dem entsprechend größer. Daher musste eine schlanke Alternative daher.
Genericons: schlank und Open Source
Die Alternative war schnell gefunden und hört auf den Namen Genericons. Dieses Icon-Font ist kostenlos, steht unter einer Opensource-Lizenz (GPL) und ist schlank. Es beinhaltet zwar nur 146 Icons beinhaltet aber in meinen Augen alle wichtigen Zeichen, die man im Web so benötigt:
Auch bei Genericons ist die Einbindung einfach. Das Paket entpacken und auf den eigenen Server hochladen. Anschließend muss man innerhalb des Kopf des Dokumentes (<head></head>) auf das CSS-Dokument verweisen:
<link rel="stylesheet" type="text/css" media="screen" href="[...]/genericons/genericons.css" />Von da an kann man auf das Icon-Font innerhalb des eigenen Projektes zurückgreifen. Man kann auf die vorgefertigten CSS-Regeln zurückgreifen. Zum Beispiel um das WordPress-Icon auszugeben müsste man folgendes an der entsprechender Stelle im HTML-Dokument oder im WordPress-Beitrag folgendes einfügen:
<span class="genericon genericon-wordpress"></span>Man kann natürlich auch eigene CSS-Regeln definieren. Wichtig sind allerdings dabei zwei Deklarationen:
.klasse:before {
font-family: Genericons;
content: '\f205';
}Diese beiden Deklarationen sind Pflicht, damit das ganze auch funktioniert. Mit der ersten Angabe wird die Schriftfamilie angegeben und die zweite Angabe ist der CSS-Wert des Icons … im besagten Fall der Wert des WordPress-Icons.
