Es sind die kleinen aber feinen Dinge, die ein schönes Bloglayout zu einem außergewöhnliches Bloglayout machen. Und ihr braucht gerade mal 5 Minuten, um schöne Vektoricons eurem Theme hinzu zu fügen.
Ich habe für euch ein cooles Step-by-Step-Tutorial, wie ihr in 10 Minuten über 25 Vektor-Icons eurer Wahl in euer Theme einbaut. Ich gebe zu, in der Fülle der Icons die auf dem Portal icomoon zur Verfügung stehen kann man Stunden versinken – daher zähle ich mal die Auswahl der Icons nicht zur Gesamtzeit hinzu 🙂
Klickt auf https://icomoon.io/app/#/select und klickt euch durch die verschiedenen Icons:
Nach dem Klick auf „Generate Font“ seht ihr nochmals eine Übersicht, auf der ihr optional auch einzelnen Icons feste Buchstaben zuordnen könnt. Klick dazu auf die kleine Klammer hinter dem jeweiligen Icon (siehe 1 auf der Grafik):
Der Name des Icons ist übrigens später auch der Klassenname in der CSS-Datei. Ich mache es immer so, dass ich mir diese Seite einmal ausdrucke, damit ich die Icons in der Übersicht immer parat habe.
Die Entwickler von icomoon haben an alles gedacht: In eurem Download befindet sich eine .json-Datei – in der alles gespeichert ist
Diese könnt ihr unter https://icomoon.io/app/#/projects hochladen und weiter bearbeiten.
Da der WordPress-Editor eigenmächtig am Code herumschraubt, und wir vor allem die Icons  so nicht im Editor sehen, empfehle ich einen Shortcode zum Einsetzen des Icons.
In meinem Beispiel habe ich einen Shortcode für hellgraue Contentboxen mit einem zentrierten kreisförmigen Icon erstellt. Hier seht ihre an einem Beispiel 3 Boxen mit verschiedenen Icons:
Das Icon kann per Variable im Shortcode mit angegeben werden, so dass ich jegliche hinterlegten Icons ganz nach Bedarf auswählen kann.
Das ist ziemlich praktisch, weil ich mit wenig Aufwand so nun eine große Anzahl an Icons zur Verfügung habe.
// Shortcodes function iconboxfunc( $atts , $content = null ) { extract( shortcode_atts( array( 'icon' => 0 ), $atts ) ); return '<div class="iconbox icon-'.$icon.'">'. $content . '</div>'; } add_shortcode( 'iconbox', 'iconboxfunc' );
Euer Text in der Box
Grün: Der Name eures Icons
Rot: Der Inhalt euerer Box
.iconbox:before { font-family: 'icomoon'; font-size:80px; color:#fff; padding:15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align:center; position:relative; top:-20px; left:50%; margin-left:-55px; border:5px solid #dedede; background-color:#dedede } .iconbox {padding:20px; padding-top:0px; border:1px solid #dedede; margin-top:80px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAYAAACEhIafAAAAEklEQVQIW2NkAAJGNGLmzJmSAAXeAeqo2zBOAAAAAElFTkSuQmCC);}
Rot: Dieser Wert muss exakt die Summe der Hälfte  der Schriftröße + 2 x des Paddings geteilt durch 2 sein. Sonst sitzt das Icon nicht zentriert.
Grün: Farbe eures Icons
Ganz einfach: je weniger eure Seite laden muss, desto schneller ist sie.
Ihr könnt euch so euer ganz persönliches Set zusammenstellen, ohne eine vielzahl weiterer Icons mit zu laden. Das ist besonders interessant, wenn ihr ganz spezielle Icons benötigt.
Und ihr seid flexibler in der optischen Anpassung.
… und ihr spart euch ein weiteres Plugin!
Probiert es einfach mal aus – es geht ganz Easy. Nächste Woche gibt es dann noch eine ganzes Bundle an Codebeispielen was ihr noch so alles mit diesen wunderbaren Icons anstellen könnt!
Das ist ja genial, vielen Dank, und als Shortcode aufbereitet, danke für deine Mühe, das probier ich aus.
P.S. die Quotes im Kreis sind ja cool!
Bemerkung für Leute, die es einfacher möchten:
zu „….. Dieser Wert muss exakt die Summe der Hälfte der Schriftröße + 2 x des Paddings geteilt durch 2 sein. Sonst sitzt das Icon nicht zentriert.“
für „2 x des Paddings geteilt durch 2 “ kann man auch den einfachen Wert des Paddings nehmen ;-))
Gruß
Martin
Ohhhhh, danke für den Tipp. Habe ich schon erwähnt, dass ich Mathe-Leistungskurs hatte? 🙂