How to use Icon Fonts

Da ich das Thema Icon Fonts bis heute beharrlich ignoriert habe, es aber doch immer attraktiver wird, habe ich mich nun doch mal dazu durchgerungen die Geschichte in einem kommenden Projekt zu testen. Die Vorteile liegen auf der Hand: die Icons sind frei skalierbar, was insbesondere für die bei uns viel erstellten responsive Themes wichtig ist, und das Aussehen lässt sich rasant schnell per CSS anpassen.

Nun geht es natürlich zuerst an ein Screendesign, wo ich gleich vor dem Problem stand diese kryptischen Binärcodes, welche mir zu den Icons angezeigt werden einzutippen. Meine kläglichen Versuche lasse ich an dieser Stelle mal hinten runter fallen. 

Der korrekte Weg ist, einfach Buchstaben, Zahlen oder Sonderzeichen manuell zuzuweisen. Ich generiere die Iconfont auf Fontellio.com (1), eine Seite die man nur über alle Maßen loben kann, da bleiben keine Wünsche offen. 

1. Icon Font zusammenstellen (nötige Icons markieren)
2. Font oben einen Namen zuweisen
3. Auf den Tab „Edit Codes“ wechseln
4. Im oberen Feld die gewünschten Buchstaben, Zahlen oder Sonderzeichen eintragen
5. Font runterladen & installieren
6. Nun kann die Font schlicht und einfach ausgewählt und die Icons entsprechend per Text-Tool eingefügt werden

Nutzung in der Website

Als Beispiel soll uns das Suchfeld unserer Drupal Fachbereichsseite DROWL.de dienen, welche wir gerade neu gestalten. Hier haben wir auch gleich einen Sonderfall, da Input Elemente keine Pseudo Elemente gestatten (:before & :after), diese sind hier auf das umgebene Container Element anzuwenden.

1. Iconfont einbinden, in unserem Beispiel nutzen wir dazu einfach das Drupal Modul @font-your-face (2)
2. Konfiguration -> Benutzeroberfläche -> @-font-your-face-settings
3. Tab oberhalb „Import local fonts“ (entsprechendes Submodul muss aktiv sein!)
4. Unter Design -> @font-your-face einmal checken ob die Font drin ist

Nun geht es im CSS File weiter, hier einfach entsprechend (am beispiel für ein Input Field) folgendes definieren:

#YOUR-INPUT-FIELD-CONTAINER:before {
    content: "b"; /* Zugewiesener Buchstabe für das entsprechende Icon */
    display: inline-block;
    font-family: "drowl_iconfont"; /* Font-Family 1:1, wie beim @font-your-face Eintrag angegeben */
    font-size: 18px;
    left: 11px;
    position: absolute; /* Der Container braucht entsprechend position: relative! */
    top: 2px;
}

Es gibt für Drupal auch ein gesondertes Iconfonts Modul. Dieses liegt heute allerdings nur als Alpha Version vor, welche bei meinem Test Ihren Dienst nicht verrichtet hat. Aber wie man sieht, es geht auch sehr gut ohne. Viel Spaß beim Testen.