WordPress: Dashicons mit eigenem Icon erweitern

WordPress bietet von Haus aus schon eine Reihe von Dashicon-Symbolen. Eine Übersicht findet ihr unter folgendem Link: https://developer.wordpress.org/resource/dashicons/
Diese sind -zumindest im Backend- auch direkt mit dem entsprechenden HTML-Tag nutzbar.

Trotz der relativ großen Auswahl kann es aber vorkommen, dass man seiner eigenen Kreativität freien Lauf lassen möchte oder muss und ein individuelles Icon einbinden möchte.  Dies ist mit ein paar wenigen Schritten auch durchaus möglich. Dazu könnt ihr wie folgt vorgehen:

1. Icon erstellen

Zuerst muss natürlich ein entspr. Icon erstellt werden. Dieses sollte nicht zu detailreich sein und für euren Zweck die nötige Aussagekraft haben. In meinem Fall benötigte ich ein einfaches Kelch-Symbol.

Für die weitere Verwendung muss das Icon im SVG-Format vorliegen. Entweder erstellt ihr die Grafik direkt in diesem Format mit einer entspr. Software oder ihr wandelt z. B. eine PNG-Datei in SVG um. Letzteres war bei mir der Fall. Ich habe dazu den Online-Konverter von Adobe genutzt. Der ist, wenn ihr nur einzelne Grafiken umwandeln wollt, kostenlos. Allerdings müsst ihr euch vorher z. B. mit eurem google – Account registrieren/anmelden. Mit Sicherheit gibt es aber auch noch andere gute Konverter. Gebt zum Schluss der Datei noch einen aussagekräftigen Namen ohne Sonderzeichen. Dieser wird später verwendet, um das Icon als Schriftzeichen einzubinden. Ich habe die Datei „kelch.svg“ genannt.

2. Font erstellen

Als nächstes muss aus der SVG-Datei ein Schrift-Symbol bzw. ein Font-Satz erstellt werden. Dafür habe ich auch wieder ein kostenloses Online-Tool genutzt, und zwar glyphter. Vielleicht findet ihr dort sogar noch ein paar Icons, die ihr auch für euer Projekt gebrauchen könnt.

Wenn ihr die Seite aufgerufen habt, klickt ihr auf das erste Feld mit dem „A“. Nun könnt ihr eure SVG-Datei auswählen, die in den Schriftsatz eingebunden werden soll. Im besten Fall seht ihr nun in diesem Feld eure Grafik. Wird dort nur ein schwarzes oder weißes Rechteck angezeigt, dann sollte eure Grafik links auf der Seite mit ein paar Einstellmöglichkeiten erscheinen.

Klickt auf unterschiedliche Bereiche eurer Grafik. Damit werden die entsprechenden Bereiche farblich invertiert. Macht dies so lange, bis im Feld „A“ das Icon so dargestellt wird, wie ihr es später haben möchtet. Mit einigen gezielten Klicks sollte das machbar sein. Die weißen Flächen werden später übrigens durch die gewählte Schriftfarbe ersetzt.


Über das Zahnradsymbol könnt ihr nun noch ein paar Angaben machen. Als „Font Name“tragt ihr einen Namen für eure Schriftart ein. Dabei am besten keine Sonderzeichen nutzen. In meinem Beispiel heißt diese „sgs-font“. Als „Class Prefix“ habe ich „sgsicons-“ gewählt. Das wird später der Prefix für die CSS-Klasse, die das jeweilige Zeichen ausgibt. Zum Schluss auf den Button [SAVE SETTINGS] klicken.

Nun könnt ihr mit Klick auf den Download-Button die ZIP-Datei mit allen notwendigen Dateien runterladen.

3. In WordPress einbinden

Ich gehe hier davon aus, dass ihr das Icon in einem selbst entwickelten Plugin nutzen möchtet. Das ganze sollte aber auch auf ähnliche Weise für die Entwicklung von Themes funktionieren.

Öffnet als erstes die ZIP-Datei. Diese sollte zwei Ordner enthalten, „css“ und „fonts“. Entpackt die Ordner und bindet diese in euer Plugin-/Theme-Verzeichnis auf der obersten Ebene ein. Nun müsst ihr die CSS-Datei, die ihr von glyphter runtergeladen habt, in WordPress registrieren. Das funktioniert mit folgenden zwei Zeilen Code, die ihr in die Haupt-Plugin-Datei oder bei Themes wahrscheinlich in die functions.php am besten möglichst am Anfang eintragt. „sgs-font.css“ müsst ihr natürlich durch den Namen eurer CSS-Datei ersetzen.

wp_register_style('my_dashicons', plugins_url( MY_PLUGIN_NAME.'/css/sgs-font.css'));
wp_enqueue_style('my_dashicons');

„my_dashicons“ ersetzt ihr durch einen beliebigen eigenen Namen. Beide Einträge müssen aber identisch sein!

Nun könnt ihr euer Icon ähnlich wie die WordPress Dashicons in eurem Projekt nutzen. Dazu fügt ihr einfach den entspr. HTML-Tag in euren Code ein.

<span class="dashicons sgsicons-kelch"></span>

„sgsicons“ muss dabei natürlich durch den von euch gewählten Klassen-Prefix (s. o.) und „kelch“ durch den entspr. SVG-Datei-Namen ersetzt werden.