{"id":2888,"date":"2012-10-29T15:56:58","date_gmt":"2012-10-29T13:56:58","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=2888"},"modified":"2018-02-25T10:57:07","modified_gmt":"2018-02-25T08:57:07","slug":"contao-arbeiten-mit-iconfonts-und-dem-webfontloader","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2012\/10\/contao-arbeiten-mit-iconfonts-und-dem-webfontloader\/","title":{"rendered":"Contao: Arbeiten mit Iconfonts und dem Webfontloader"},"content":{"rendered":"

\"\"<\/a>Listen, \u00dcberschriften, Links – es gibt viele Elemente in einer Webseite, die man mit kleinen, vorangestellten Icons besonders hervorheben kann. Manchmal sieht es einfach nur h\u00fcbsch aus und unterstreicht die assoziative Wirkung, manchmal schreit es regelrecht nach einem Icon um Funktionen st\u00e4rker in den Fokus des Betrachters zu r\u00fccken.<\/strong><\/p>\n

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\u00e4lt.<\/p>\n

In meinem Grafikprogramm habe ich einen Haufen frei erh\u00e4ltliche Symbolschriftarten installiert und liebe die kleinen Pictogramme. Wenn man mit einem Vektorprogramm wie Illustrator oder CorelDraw arbeitet, ist es einigerma\u00dfen praktikabel sich die Icons herauszufischen, die man f\u00fcr eine Webseite braucht. Weil jedoch aufgrund der bunten Landschaft der mobilen Endger\u00e4te das Thema responsive Webdesign m\u00e4chtig Fahrt aufgenommen hat, f\u00e4llt der Nachteil, dass die R\u00e4nder von statischen Grafiken unsch\u00f6n verschwimmen, immer st\u00e4rker unangenehm auf.<\/p>\n

Iconfonts haben den Vorteil, dass es keine Grafiken, sondern Schriftzeichen sind, die wie eine ganz normale Schrift skaliert werden und ihre scharfe Umrandung beibehalten.<\/p>\n

Schritt 1 – Webfontlaoder installieren<\/span><\/h4>\n

Der Webfontloader kann \u00fcber den Erweiterungkatalog installiert werden.<\/strong>
\nhttp:\/\/contao.org\/de\/extension-list\/view\/wfl.html<\/a>
\nLizenz GNU Lesser Public License (LGPL)
\nUrheberrecht 2011 de la Haye Kommunikationsdesign
\nAutor Christian de la Haye (christian) www.delahaye.de<\/a><\/p>\n

Schritt 2 – @font-face-kit holen<\/span><\/h4>\n

Iconfonts unterliegen den gleichen Lizenzbedingungen wie normale Fonts. Also: bitte auf die Bestimmungen achten. Du kannst freie Fonts von Fontsquirrel benutzen.
\nhttp:\/\/www.fontsquirrel.com<\/a>
\nKlicke in der Men\u00fcleiste oben auf „@font-face-kits<\/strong>„.<\/p>\n

\"Auswahl<\/a>
\nIn der Rubrik Dingbats findest du einige, frei verwendbare Iconfonts.
\nIn meinem Demobeispiel habe ich das Pflanzenblatt aus der Schrift Entypo<\/strong> verwendet.<\/p>\n

Mit der rechten Maustaste auf „Get Kit“<\/strong> klicken und „Link in neuem Tab \u00f6ffnen<\/strong>“ w\u00e4hlen. Aus der Adresszeile des Browsers die URL des Kits in die Zwischenablage der Maus kopieren.<\/p>\n

Schritt 3 – Das kit im Webfontloader eintragen.<\/span><\/h4>\n

Im Backend von Contao links auf „Webfontloader“ klicken und als erstes eine neue Schriftensammlung anlegen und diese beispielsweise mit „Fontsquirrel<\/strong>“ benennen.<\/p>\n

\"Contao<\/a>
\nDann weiter \u00fcber das Bearbeiten-Symbol und Klick auf „neue Schriftdefintion<\/strong>“ die Schrift Entypo anlegen. Dabei aus dem Selectmen\u00fc „Fontsquirrel<\/strong>“ ausw\u00e4hlen und ganz unten den Haken bei „Ver\u00f6ffentlichen<\/strong>“ nicht vergessen.<\/p>\n

Nun den Men\u00fcpunkt „Seitenlayouts<\/strong>“ aufrufen und in dem Seitenlayout, in welchem der Icontfont benutzt werden soll, aus den zur Verf\u00fcgung stehenden Optionen eine Auswahl treffen.<\/p>\n

\"Contao<\/a><\/p>\n

Schritt 4 – Anwendungsbeispiel, eine Liste mit vorangestelltem „Blatt“ gestalten<\/span><\/strong><\/p>\n

Wie eingangs schon erw\u00e4hnt, 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\u00e4chst einmal einen Absatz \u00fcber den Texteditor anzulegen. Als Text am besten einfach das ABC (gro\u00df 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\u00f6schen.<\/p>\n

Im Falle der Entypo-Iconfont ist das Blatt unter „G“ zu finden.<\/p>\n

Die CSS-Auszeichnung des Listenelementes habe ich folgenderma\u00dfen angelegt:<\/p>\n

 \r\n.mainmenue a:before,.mainmenue span.active:before {\r\n\r\nwidth:20px;\r\nheight:20px;\r\ntop:13px;\r\nposition:relative;\r\ndisplay:inline-block;\r\nmargin-right:5px;\r\npadding-top:5px;\r\npadding-right:20px;\r\nborder:1px solid #a19f9f;\r\nfont:64px\/5% EntypoRegular;\r\ncolor:#000;\r\ncontent:\" G \";\r\n}\r\n\r\n.mainmenue a:hover:before,.mainmenue span.active:before {\r\n\r\nborder:1px solid #f39;\r\nfont:64px\/5% EntypoRegular;\r\ncolor:#f39;\r\ncontent:\" G \";\r\n}<\/pre>\n
Die Schwierigkeit, die sich hier zeigt war, dass die voreingestellte Schriftgr\u00f6\u00dfe von 14px zu klein f\u00fcr das Icon ist und ich sie auf 64px erheblich vergr\u00f6\u00dfern musste. Da sich vorangestellte Icons aus einem Iconfont aber wie ein Schriftzeichen verhalten, wurde damit der Zeilenabstnad zu gro\u00df.<\/p>\n
nach einigem Ausprobieren habe ich das Problem mit der Reduzierung der Zeilenh\u00f6he auf 5% und einer Einjustierung des Zeichens mit position:relative beheben k\u00f6nnen.<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Schluss mit Grafiken? Icons aus Iconfonts lassen sich viel schneller einbauen und sind eine interessante Alternative.<\/p>\n","protected":false},"author":1,"featured_media":2905,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[93,74,87,119,451],"yst_prominent_words":[821,822,823,824,536,825,632,826,635,827,812,1165,813,814,815,816,817,818,819,820],"class_list":["post-2888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","category-contao","tag-contao","tag-grafik","tag-responsive-webdesign","tag-grafik-gestaltung","tag-iconfonts"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/2888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=2888"}],"version-history":[{"count":3,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/2888\/revisions"}],"predecessor-version":[{"id":4645,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/2888\/revisions\/4645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media\/2905"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=2888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=2888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=2888"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=2888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}