svenspages.de


Tags:
Jahre:



 
 
 
 
 

Eigene Schriftzeichen und Logos als Icon-Font einbinden


icomoon-io Ich habe gera­de eine nütz­li­che App ent­deckt: www.Icomoon.io. Damit kann man sich ein paar Icons zusam­menkli­cken und als Font her­un­ter­la­den. Bei­spiels­wei­se macht das Sinn, wenn man Lade­zeit spa­ren will oder man ska­lier­ba­re Sym­bo­le braucht. Gute Idee.
Also hab ich das gleich mal mit ein paar nütz­li­chen Sym­bo­len aus­pro­biert.

Nun, im Grun­de star­tet man da mit dem ankli­cken der Icons, dann kann man das Gan­ze schon als ZIP-Datei her­un­ter­la­den. Dar­in ent­hal­ten sind zum einen die style.css, die an und für sich schon zum Ver­wen­den der Icons auf der eige­nen Web­sei­te aus­reicht, zum ande­ren noch Demo­da­tei­en und die Icons als klei­ne Font-Dateien selbst in diver­sen For­ma­ten, um sie auf dem eige­nen Web­s­pace zu hos­ten.

Am ein­fachs­ten ist es, wenn man den mit­ge­lie­fer­ten Ord­ner »fonts« in den WordPress-Template-Ordner und den Inhalt der style.css aus der ZIP-Datei in die style.css des aktu­el­len WordPress-Templates kopiert (an eine Stel­le, wo man das auch wie­der fin­det). Schon gibt es CSS-Klassen, die mit ».icon« anfan­gen und die jeweils ein Icon-Zeichen vor den damit gekenn­zeich­ne­ten Absatz set­zen.

Vor dem jewei­li­gen Bezeich­ner in fol­gen­der Auf­zäh­lung soll­te ein Icon im Fließ­text erschei­nen: Blei­stift, Umschlag, Pin­na­del, gebo­ge­ner Pfeil, Anfüh­rungs­zei­chen, Link (Ket­te), Hand zeigt nach rechts, Tei­len, Goo­gle+, Face­book, Twit­ter, Blog­ger und Tum­blr. Was ich auch prak­ti­sch fin­de, ist, dass die Icons die Zei­len­hö­he des umlie­gen­den Tex­tes nicht ver­än­dern (wie es Pixel­gra­fi­ken tun wür­den) und sich mit dem Text frei ska­lie­ren las­sen. Zudem spart es noch Lade­zeit, da kei­ne zusätz­li­chen Gra­fi­ken gela­den wer­den müs­sen.

Am bes­ten las­sen sich die .icon…-Klas­sen mit dem span-Tag ein­bin­den. Im obi­gen Absatz habe ich lee­ren span-Containern die dem jewei­li­gen Icon ent­spre­chen­de Klas­se zuge­wie­sen.

Edit: Bei akti­vier­tem Plugin »Mobile-Pack« wer­den die Icons in dem Mobil-Template nicht mit ange­zeigt. Sicher­li­ch müss­te dazu ver­mut­li­ch die CSS-Definition und der Ord­ner »fonts« rein­ko­piert wer­den. Wenn ich das Plugin deak­ti­vie­re, sehe ich die Icons im Text — aller­dings ohne nach­fol­gen­des Leer­zei­chen (direkt am fol­gen­den Text ran­ge­klatscht).

Kategorie(n): , Tag(s): , , ,
letzte Änderung: 08.04.2014, 19:53 Uhr

Verknüpft mit:


Gedanken dazu:

Noch kein Kommentar vorhanden. Schreiben Sie den Ersten!