Icons begegnen Dir überall im Web: Zum Beispiel als Social-Media-Symbole oder Menü-Icons. Diese kleinen Symbole machen eine Seite übersichtlicher und ergänzen richtig eingebunden Dein Blogdesign.
Wie Du Icons am besten in Dein Blog einbindest, erfährst Du hier.
Was sind Icon Fonts?
Icon Fonts sind eine einfache Lösung, Icons in Dein Blog einzubinden, ohne Grafiken nutzen zu müssen. Denn wie der Name schon sagt, handelt es sich um Schriftarten, die anstelle von Buchstaben Icons enthalten. Häufig genutzte Icons sind Einkaufswagen, Download-Buttons oder Symbole für die verschiedenen sozialen Netzwerke.
Diese Fonts bringen eine Reihe von Vorteilen mit sich: Anstatt ein Grafikprogramm bemühen zu müssen, kannst Du die Größe und Farbe der Icons unkompliziert im CSS an Deine Vorstellungen anpassen. Anders als Icon-Bilder fallen die Ladezeiten für Icon Fonts wenig ins Gewicht.
Es gibt viele kostenlose Icon Fonts. Zu den bekanntesten gehört Font Awesome. In dieser Icon Font finden sich Symbole für fast jeden Bedarf. Aber wie lassen sich nun die Icons bzw. Symbole in WordPress anzeigen?
Mögliche Theme-Optionen
Viele Themes stellen bereits eine Integration von Icon Fonts zur Verfügung. Hier lohnt sich ein Blick in die Dokumentation oder in die Theme Optionen im Adminbereich. Vielleicht findest Du dort bereits was Du suchst, dann musst Du keine zusätzlichen Icon Fonts einbinden.
Implementierung durch ein Shortcode-Plugin
Eine einfache Möglichkeit, Icons in Dein Blog einzubinden, ist die Verwendung eines Shortcode-Plugin. Über diese Plugins können die Icons mittels Shortcodes wie z.B. [icon name="fa-shopping-cart"] eingesetzt werden. Für Font Awsome gibt es ein spezielles Plugin namens Better Font Awesome. Falls Du eine andere Icon Font per Shortcode integrieren willst, nutzt Du ein Plugin wie WP SVG Icons.
Durch diese Plugins kannst Du Icons unkompliziert entweder durch einen Shortcode oder einen "Icon hinzufügen"-Button im Editor in Deine Artikel einfügen.
Icon Fonts manuell integrieren
Wenn Du kein Plugin installieren möchtest, kannst Du Icon Fonts auch wie jede andere Schriftart unkompliziert in Dein Blog implementieren. Dafür stehen Dir zwei Wege zur Verfügung:
1. Direkte Verlinkung der Icon Font
Eine Möglichkeit ist, direkt von Deinem WordPress-Theme auf eine Icon Font zu verlinken. Einige Schriftarten befinden sich auf CDN-Servern. Auf diese kannst Du entweder die Verlinkung in die header.php Deines Themes einfügen. Für Font Awsome sähe diese Verlinkung folgendermaßen aus:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
Um ggf. auftretende Probleme mit andere Plugins zu vermeiden, ist es allerdings empfehlenswerter die Verlinkung in die functions.php Deines Themes bzw. besser noch Child Themes einzusetzen. Der Code müsste — wieder am Beispiel von Font Awsome — folgendermaßen lauten:
function wpb_load_fa() {
wp_enqueue_style( 'wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
2. Icon Font auf Server laden
Die zweite Möglichkeit ist etwas komplexer. Allerdings hast Du die Schriftart anschließend auf Deinem Server und musst nicht extern darauf verlinken. mit Hilfe eines FTP-Programms erstellst du ein neues Verzeichnis namens "fonts". Lade die Icon Font herunter und lade den Ordnerinhalt des Fontdownloads in den vorbereiteten "fonts" Ordner auf Deinem Server. Füge abschließend den entsprechenden Code in die functions.php Deines Themes bzw. Child Themes ein. Beispiel für Font Awsome:
function wpb_load_fa() {
wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
Icon anzeigen lassen
Jetzt hast Du über eine der beiden Möglichkeiten die gewünschte Icon Font eingebunden. Damit die zur Verfügung stehenden Icons auch angezeigt werden, musst Du folgendermaßen vorgehen:
Als erstes benötigst Du die Bezeichnung des Icons, das Du anzeigen willst. Wir gehen in unserem Beispiel wieder davon aus, dass Font Awsome eingebunden wurde. Nun wollen wir das Symbol für einen Einkaufswagen anzeigen lassen, dessen Bezeichnung "fa-shopping-cart" lautet.
An der Stelle an der das Icon angezeigt werden soll, wird dann folgender HTML-Code integriert:
<i class="fa-shopping-cart"></i>
Um die Anzeigegröße und Farbe zu bestimmen trägst Du einen entsprechenden CSS-Code in die style.css Deines Child Themes ein:
.fa-shopping-cart {
font-size:20px;
color:#FF66FF;
}
Fazit
Icons sind wichtige Elemente um Besuchern eine schnelle visuelle Orientierung zu geben. Egal, ob mit Plugin oder manuell integriert: Icons können ganz einfach in WordPress eingebaut werden, ohne die Ladezeit Deiner Website zu stark zu beeinflussen.
