Listen, Überschriften, Links – es gibt viele Elemente in einer Webseite, die man mit kleinen, vorangestellten Icons besonders hervorheben kann. Manchmal sieht es einfach nur hübsch aus und unterstreicht die assoziative Wirkung, manchmal schreit es regelrecht nach einem Icon um Funktionen stärker in den Fokus des Betrachters zu rücken.
Um z.B. kleine Pfeile einem .more oder .back Link voranstellen habe ich dazu bisher entweder Bilder oder die CSS-Pseudoklassen :before und :after mit html-Entities benutzt. Bei letzterem mit mehr oder weniger schlechtem Gewissen, denn der IE kann erst ab Version 8 mit diesen Pseudoklassen umgehen … was mich aber weiterhin nicht davon abhält.
In meinem Grafikprogramm habe ich einen Haufen frei erhältliche Symbolschriftarten installiert und liebe die kleinen Pictogramme. Wenn man mit einem Vektorprogramm wie Illustrator oder CorelDraw arbeitet, ist es einigermaßen praktikabel sich die Icons herauszufischen, die man für eine Webseite braucht. Weil jedoch aufgrund der bunten Landschaft der mobilen Endgeräte das Thema responsive Webdesign mächtig Fahrt aufgenommen hat, fällt der Nachteil, dass die Ränder von statischen Grafiken unschön verschwimmen, immer stärker unangenehm auf.
Iconfonts haben den Vorteil, dass es keine Grafiken, sondern Schriftzeichen sind, die wie eine ganz normale Schrift skaliert werden und ihre scharfe Umrandung beibehalten.
Schritt 1 – Webfontlaoder installieren
Der Webfontloader kann über den Erweiterungkatalog installiert werden.
http://contao.org/de/extension-list/view/wfl.html
Lizenz GNU Lesser Public License (LGPL)
Urheberrecht 2011 de la Haye Kommunikationsdesign
Autor Christian de la Haye (christian) www.delahaye.de
Schritt 2 – @font-face-kit holen
Iconfonts unterliegen den gleichen Lizenzbedingungen wie normale Fonts. Also: bitte auf die Bestimmungen achten. Du kannst freie Fonts von Fontsquirrel benutzen.
http://www.fontsquirrel.com
Klicke in der Menüleiste oben auf „@font-face-kits„.
In der Rubrik Dingbats findest du einige, frei verwendbare Iconfonts.
In meinem Demobeispiel habe ich das Pflanzenblatt aus der Schrift Entypo verwendet.
Mit der rechten Maustaste auf „Get Kit“ klicken und „Link in neuem Tab öffnen“ wählen. Aus der Adresszeile des Browsers die URL des Kits in die Zwischenablage der Maus kopieren.
Schritt 3 – Das kit im Webfontloader eintragen.
Im Backend von Contao links auf „Webfontloader“ klicken und als erstes eine neue Schriftensammlung anlegen und diese beispielsweise mit „Fontsquirrel“ benennen.
Dann weiter über das Bearbeiten-Symbol und Klick auf „neue Schriftdefintion“ die Schrift Entypo anlegen. Dabei aus dem Selectmenü „Fontsquirrel“ auswählen und ganz unten den Haken bei „Veröffentlichen“ nicht vergessen.
Nun den Menüpunkt „Seitenlayouts“ aufrufen und in dem Seitenlayout, in welchem der Icontfont benutzt werden soll, aus den zur Verfügung stehenden Optionen eine Auswahl treffen.
Schritt 4 – Anwendungsbeispiel, eine Liste mit vorangestelltem „Blatt“ gestalten
Wie eingangs schon erwähnt, war mein Objekt der Begierde das Blatt aus dem Iconfont Entypo. Es ist etwas tricky herauszufinden, unter welchem Buchstaben der Tastatur sich das Blatt versteckt. Leider habe ich keine praktikablere Methode gefunden als die, in einen Artikel von Contao zu gehen und dort zunächst einmal einen Absatz über den Texteditor anzulegen. Als Text am besten einfach das ABC (groß und klein) runtertippen. Dem Absatz die CSS-Klasse „entypo“ geben und via CSS die Icons anzeigen lassen. Hat man das Zeichen gefunden, Absatz wieder löschen.
Im Falle der Entypo-Iconfont ist das Blatt unter „G“ zu finden.
Die CSS-Auszeichnung des Listenelementes habe ich folgendermaßen angelegt:
.mainmenue a:before,.mainmenue span.active:before {
width:20px;
height:20px;
top:13px;
position:relative;
display:inline-block;
margin-right:5px;
padding-top:5px;
padding-right:20px;
border:1px solid #a19f9f;
font:64px/5% EntypoRegular;
color:#000;
content:" G ";
}
.mainmenue a:hover:before,.mainmenue span.active:before {
border:1px solid #f39;
font:64px/5% EntypoRegular;
color:#f39;
content:" G ";
}
Die Schwierigkeit, die sich hier zeigt war, dass die voreingestellte Schriftgröße von 14px zu klein für das Icon ist und ich sie auf 64px erheblich vergrößern musste. Da sich vorangestellte Icons aus einem Iconfont aber wie ein Schriftzeichen verhalten, wurde damit der Zeilenabstnad zu groß.
nach einigem Ausprobieren habe ich das Problem mit der Reduzierung der Zeilenhöhe auf 5% und einer Einjustierung des Zeichens mit position:relative beheben können.