Icon-Bibliothek
Eigene SVG-Icons in WordPress sammeln: per Upload, aus der Mediathek oder als eingefügter Code hinzufügen, umbenennen, löschen und ihren Code kopieren.
Die Icon-Bibliothek ist das Zuhause für deine eigenen Icons in WordPress. Du fügst ein Icon einmal hinzu, und danach steht es auf der ganzen Website bereit: im Icon-Block, per Shortcode und in Theme-Templates. Diese Anleitung zeigt, wie du die Bibliothek füllst und pflegst.
Bevor du loslegst
- Du bist Administrator. Die Bibliothek gehört der ganzen Website, deshalb dürfen nur Administratoren sie ändern.
- Icon-Bibliothek aktivieren ist unter Icons → Einstellungen eingeschaltet.
- Du hast ein paar SVG-Icons bereit, als Dateien oder als Code. Einfache, einfarbige Icons funktionieren am besten.
Die Bibliothek öffnen
Gehe zu Icons → Icon-Bibliothek. Oben siehst du eine gestrichelte Ablagefläche. Darunter liegt das Raster mit deinen Icons, ein Suchfeld und der Knopf Mehrere auswählen.
Siehst du die Meldung "Die Icon-Bibliothek ist aus", schalte sie zuerst unter Icons → Einstellungen ein.
Icons hinzufügen
Es gibt vier Wege, ein Icon hinzuzufügen. Alle bereinigen die SVG mit demselben Sanitizer wie ein Mediathek-Upload.
Dateien ziehen
Ziehe eine oder mehrere .svg-Dateien von deinem Computer auf die gestrichelte Fläche mit SVG-Dateien hier ablegen.
Raster prüfen
Jede Datei wird ein Icon, benannt nach der Datei. Eine Meldung sagt dir, wie viele Dateien gespeichert wurden.
Auswahl öffnen
Klicke in der Ablagefläche auf SVG auswählen.
Dateien wählen
Wähle eine oder mehrere .svg-Dateien aus, bis zu 100 auf einmal, und bestätige.
Mediathek öffnen
Klicke auf Aus der Mediathek wählen.
SVGs auswählen
Wähle eine oder mehrere SVG-Dateien, die schon in deiner Mediathek liegen, und klicke auf Als Icons hinzufügen.
Formular öffnen
Klicke auf Markup einfügen.
Ausfüllen
Gib einen Name ein, zum Beispiel "Pfeil rechts". Füge den SVG-Code, der mit <svg beginnt und mit </svg> endet, in SVG-Markup ein. Die Vorschau zeigt das Ergebnis.
Hinzufügen
Klicke auf Hinzufügen.
Wie viele Icons du behältst, ist nicht begrenzt.
Name und Adresse
Jedes Icon hat zwei Namen:
| Beispiel | Wofür | |
|---|---|---|
| Name | Pfeil rechts | Was Menschen sehen, zum Beispiel im Icon-Block. Du kannst ihn jederzeit ändern. |
| Adresse (auch Slug) | easy-svg/pfeil-rechts | Darüber finden Blöcke, Shortcodes und Templates das Icon. Sie entsteht aus dem Namen und ändert sich danach nie. |
Der erste Teil der Adresse, easy-svg/, ist die Sammlung. Das kostenlose Plugin hält alle Icons in einer Sammlung namens Easy SVG.
Fügst du ein zweites Icon "Pfeil rechts" hinzu, ist die Adresse pfeil-rechts schon vergeben, also wird das neue Icon als pfeil-rechts-2 gespeichert. Eine Meldung sagt das und bietet „pfeil-rechts“ stattdessen ersetzen an, falls du eigentlich dem vorhandenen Icon eine neue Zeichnung geben wolltest.
Suchen, umbenennen und löschen
Jede Kachel im Raster zeigt das Icon, seinen Namen und darunter kleine Knöpfe.
- Suchen. Tippe in Icons durchsuchen…, um nach Name oder Adresse zu filtern.
- Umbenennen. Klicke auf den Stift, gib einen neuen Namen ein und klicke auf Speichern. Die Adresse bleibt gleich, also geht nichts kaputt, was das Icon schon nutzt.
- Code kopieren. Klicke auf den Kopieren-Knopf und wähle PHP, Shortcode oder Block. Der Code landet in deiner Zwischenablage. Siehe Icons verwenden.
- Löschen. Klicke auf den Papierkorb und bestätige mit Löschen.
Mit vielen Icons auf einmal arbeiten
Klicke auf Mehrere auswählen. Auf den Kacheln erscheinen Kästchen. Hake die gewünschten Icons an, oder klicke auf Alle auswählen, um alle Icons zu nehmen, die das Raster gerade zeigt (bei einer Suche nur die Treffer). Eine dunkle Leiste mit Entfernen erscheint, mit Easy SVG Pro auch mit weiteren Aktionen. Klicke auf Auswahl beenden, wenn du fertig bist.
Gut zu wissen
- Warum die Option Block manchmal ausgegraut ist. Der WordPress-Icon-Block kann nur Pfade und Polygone zeichnen. Ein Icon aus anderen Formen, etwa einem Kreis oder Rechteck, bekommt den Hinweis "Nicht für dieses Icon" und kann nicht in den Icon-Block. PHP und Shortcode funktionieren trotzdem.
- Einfarbige Icons folgen deiner Textfarbe am besten. Nutzt ein Icon
currentColorals Farbe, übernimmt es die Farbe des umgebenden Textes. - Mehr als eine Sammlung. Agenturen mit mehreren Kunden oder Marken wollen meist ein eigenes Icon-Set pro Kunde. Genau das bringt Easy SVG Pro.
Häufige Fragen
Passende Anleitungen
Icons verwenden
Icon-Block, Shortcode und PHP.
Sammlungen und Sets (Pro)
Ein Icon-Set pro Kunde oder Marke.
Entwickler können Icons auch per Code hinzufügen und ändern. Siehe Entwickler-Referenz.