4000 Vektor Icons for free – macht euch euer persönliches Iconset für eure Website – mit Shortcode zum Einbau

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.

Aber mal ganz ehrlich: Wer von euch bastelt seine Icons noch umständlich mit dem Photoshop?

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 🙂

Das lernt ihr in diesem Artikel:

1. Stellt euch aus einer Fülle an freien Icons per Drag&Drop euer persönliches Iconset für euren Blog zusammen und importiert die Icons per Font in euer Theme.
2. Und ich habe noch einen konkreten Codeschnipsel zum Copy&Paste, mit denen ihr tolle Boxen in euren WordPress-Content einfügen könnt.

Auf geht´s in das Icon-Schlaraffenland – stellt euch euer Icon-Set zusammen

Klickt auf https://icomoon.io/app/#/select und klickt euch durch die verschiedenen Icons:

1. Klickt auf die Icons, die ihr mitnehmen möchtet
2. Zum Löschen wählt den Mülleimer und wählt danach wieder die Icons, die ihr entfernen möchtet
3. Mit Klick auf „Add Icons From Library“ gelangt ihr zu einem Archiv voller Icons – viele davon sind kostenlos – bitte beachtet das jeweilige Lizentmodell!
4. Mit „Generate Font“ generiert euch icomoon alle notwendigen Dateien.

Schriftset fertigstellen

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.

Was mache ich, wenn ich später noch ein Icon hinzufügen möchte?

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.

So baut ihr eure Icons in euer Theme ein:

1. Entzipt euer Fontset und ladet per FTP den kompletten „Font“-Ordner in den Theme-Ordner eures Themes, bzw. Childthemes.
2. Öffnet die style.css der zip-Datei  und kopiert euch den Inhalt in die style.css eures Themes / Childthemes.
3. In der Zip-Datei von Icomoon findet ihr eine demo.html mit den kompletten Beispiele, wie ihr die Icons aufrufen könnt.

Und jetzt der Clou: Ein Shortcode für euer Theme zum Copy& Paste mit dem Ihr eure neuen Icons per Shortcode als schicke Contentboxen aufrufen könnt!

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.

So sieht das ganze aus:

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.

Das kommt in eure functions.php:

// 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' );

So ruft ihr den Shortcode auf:

Euer Text in der Box

Grün: Der Name eures Icons
Rot: Der Inhalt euerer Box

Und das sind meine CSS Ergänzungen, damit die Optik der Kästen so aussieht wie in meinem Beispiel:

.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

Übrigens: Den Gestreiften Hintergrund habe ich mit einem Pattern von Patternify gemacht. Mehr schicke gemusterte Hintergrundbeispiele zum Copy& Paste gibts hier:
25 CSS Hintergründe zum Copy & Paste

Warum soll ich diese manuelle Lösung verwenden, wenn es doch so viele Plugins mit tausenden von Icons gibt?

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!

Kommentare

1. Birgit 15. Juli 2015 um 12:37 Uhr

   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!

   Antworten
2. Martin 20. Juli 2015 um 11:21 Uhr

   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

   Antworten
   • Mirjam 20. Juli 2015 um 14:44 Uhr

     Ohhhhh, danke für den Tipp. Habe ich schon erwähnt, dass ich Mathe-Leistungskurs hatte? 🙂

     Antworten

Das könnte dich auch interessieren: