Auch auf unserer Seite werden sie fleißig genutzt. Die Rede ist von Icons, genauer gesagt von Icon Fonts (Bilderschriften), mithilfe derer keine Texte, sondern Icons geschrieben werden können. Icons sind nicht nur als Social-Media-Links, sondern auch als Menü-Icons sehr beliebt. Wir erklären Ihnen, was für Vorteile Ihnen Icon Fonts bringen und wo Sie sie herbekommen.

Wieso Icon Fonts und keine Bilddateien?

Diese Frage lässt sich einfach beantworten. Immer, wenn ein Bild geladen wird, wird eine HTTP-Anfrage an den Server gesendet. Laden Sie nun all Ihre Icons als Bilddateien in Ihre Website, so wird pro Icon eine HTTP-Anfrage an den Server gesendet, um das jeweilige Icon darzustellen. Das muss nicht zwingend zum Problem werden, aber kurz gesagt: je mehr Anfragen an Ihren Server gesendet werden, desto mehr Belastung bedeutet das für ihn.
Icon Fonts sind dahingehend deutlich Server-freundlicher. Einmal eingebunden brauchen diese Fonts nur eine einzige HTTP-Anfrage für alle Icons gemeinsam zu senden.
Neben der geringen Belastung für den Server sind Icon Fonts zudem wie Schriften leicht anpassbar. Sie reagieren nämlich auf CSS-Befehle und lassen somit schnell und einfach ihre Farbe und Größe ändern und können sogar animiert werden.
Ein weiterer, bedeutender Vorteil von Icon Fonts ist, dass die darin enthaltenen Icons im Gegensatz zu Bildern voll und ganz skalierbar sind. Die sogenannten Vektor-Grafiken sind in jeder Größe optimal zu erkennen und werden nicht unscharf, egal, wie groß Sie die Icons einstellen oder welche Auflösung der Bildschirm Ihrer Besucher hat.

Wie bekomme ich so einen Icon Font?

Icon Fonts lassen sich auf verschiedenen Seiten herunterladen. Die bekanntesten hierfür sind Font Awesome, IcoMoon oder auch Fontello.
Während Sie von Font Awesome lediglich die gesamte Icon-Sammlung heruntergeladen können, haben Sie bei Fontello und IcoMoon die Möglichkeit, sogenannte „Custom Icon Fonts“, also eigens zusammengestellte Kollektionen von Icons zusammenzustellen.

Beispiel: Icons von Font Awesome

An dem Beispiel von IcoMoon erklären wir Ihnen, wie Sie die Icons herunterladen können. Dazu gehen Sie zuerst auf die Übersicht der freien Icons von IcoMoon und wählen dort aus, welche Icons Sie benötigen. Per Mausklick markieren Sie ein Icon, mit gedrückter Shift-Taste wählen Sie mehrere Icons aus, indem Sie z.B. auf das erste und letzte Icon einer Reihe drücken.

Icons bei IcoMoon auswählen

Sofern Sie mit Ihrer Auswahl zufrieden sind, laden Sie diese unter „Generate Font“ herunter. Sie erhalten eine ZIP-Datei. Das ist Ihr eigens zusammengestellter Icon Font.
Um diese Icons nun auf WordPress benutzen zu können, gibt es verschiedene Wege. Entweder, Sie binden den Font via FTP-Zugang in Ihr Child-Theme ein, oder Sie laden sich ein Plug-in herunter, mit dessen Hilfe Sie Ihre zusammengestellten Icons leicht nutzen können. Beide Wege haben ihre Vorteile, die wir Ihnen jetzt erklären.

Das WP SVG Icons Plugin

Bei dem WP SVG Icons Plug-in erhalten Sie im Seiten-/Beitragseditor sowie bei Ihren Menüs die Möglichkeit, Icons hinzuzufügen und anzupassen. Neben verschiedensten Icons, die bereits in der Standartauswahl des Plug-ins vorhanden sind, können Sie von Ihnen erstellte Iconfonts (z.B. von IcoMoon) ins Plug-in laden und nutzen.

Ein Icon per Plug-in Shortcode platzieren

Durch den „Add Icon“ Button oder spezielle Plug-in Shortcodes können Sie die Icons ganz leicht in Ihre Seiten und Beiträge integrieren.
Die kostenpflichtige Version des Plug-ins bietet neben dem reinen Einfügen von Icons noch mehr Gestaltungsoptionen, wenn Sie kein Freund von direkten CSS Anpassungen sind. Sie können mittels Regler die Größe des Icons, Iconanimationen und Farbe auswählen und Ihre Icons schnell und einfach individuell gestalten.

Das Einbinden via FTP-Zugang

Nun kommen wir zum Einbinden der Icons via FTP-Zugang. Für diese Methode brauchen Sie nicht extra ein Plug-in zu installieren. Wichtig hierfür sind nur der fonts-Ordner und die Datei style.css aus Ihrem entpacktem ZIP-Ordner. Fügen Sie die vier Dateien aus dem fonts-Ordner in einen fonts-Ordner in Ihrem Childtheme ein. Erstellen Sie einen, falls keiner vorhanden ist.

Im IcoMoon ordner: So geht’s

Danach nehmen Sie sich einen Texteditor wie beispielsweise SublimeText3 oder Notepad++ zur Hand und öffnen die style.css aus dem ZIP-Ordner. Kopieren Sie den gesamten Inhalt und fügen Sie diesen in die style.css Ihres Childthemes ein. Nachdem Sie diese gespeichert haben, ist alles dafür bereit, ein paar Icons zu platzieren.
Anders als bei dem Plug-in erscheint nun allerdings kein eigenes „Icon einfügen“-Symbol. Um ein Icon erscheinen zu lassen, gehen Sie wie folgt vor:

So leicht erstellen Sie Ihre Icons

Geben Sie im Textbereich Ihrer Website einem div die CSS-Klasse des Icons, welches es darstellen soll. In unserem Fall ist das die Klasse „icon-pacman“, haben Sie einen Stern heruntergeladen dürfte dieser die Klasse „icon-star“ haben. Alle Klassen finden Sie für gewöhnlich auf der Website des Iconanbieters oder in der heruntergeladenen Style.css.
Speichern Sie die Seite nun ab und schauen sich den Beitrag/die Seite an, so ist das Icon bereits zu sehen.

Ein kleines Pacman-Icon im Beitrag

Wenn Sie das Icon größer, in einer anderen Farbe oder auf jegliche andere Weise angepasst haben wollen, fügen Sie wie wir eine weitere, eigene Klasse hinzu. Wir haben unsere Klasse „mein_icon“ genannt. Diese können Sie mit Hilfe des Plug-ins Simple Custom CSS anpassen. Hier ein Beispiel, wie Sie Ihr Icon blau und etwas größer gestalten:

Stylen Sie mit Hilfe von Custom CSS

Wenn Sie alles abgespeichert haben, und zum Beitrag/auf die entsprechende Seite wechseln, erscheint das Icon mit den von Ihnen angegebenen CSS-Befehlen.

Passen Sie Ihr Icon selber an!

Fazit

Ob mit oder ohne Plug-in, heutzutage ist es unsagbar einfach, sich seinen eigenen Icon Font zusammen zu stellen und in die eigene WordPress-Website einzubinden. Ein Grund mehr für Sie, auf Bilddateien für Icons zu verzichten, damit Ihre Website auf allen Geräten einen knackigen Eindruck hinterlässt und möglichst schnell lädt.

Quelle Bilder: Eigene Screenshots