Eigene Icons/Piktogramme verwenden

Quelle

Die beste Quelle für Icons ist aus unserer Sicht Font Awesome. Die Dateien dort sind alle bereits optimiert und können direkt eingesetzt werden. Natürlich muss man die Lizenz Bedingungen beachten und ggf. den Credit setzen.

Bei SVGs von anderen Quellen muss geprüft werden ob die SVG korrekt angelegt ist um die Farbe anschließend in den Block Einstellungen ändern zu können.

Anwendungsbeispiel

Viele SVGs sind so aufgebaut und lassen sich so nicht im WordPress Backend bearbeiten:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path stroke="#0000FF" d="M16,1c8.3,0,15,6.7,15,15s-6.7,15-15,15S1,24.3,1,16S7.7,1,16,1M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0L16,0z"/>
  <circle fill="#0000FF" cx="16" cy="16" r="7"/>
</svg>

Der Blaue Punkt in der Mitte (<circle> Tag) halt als Füllfarbe (fill="#0000FF") blau hinterlegt. Der Pfad (<path> Tag) hat auch Blau als Konturfarbe (stroke=“#0000FF“) hinterlegt. Dadurch das hier Farben hinterlegt wurden, können diese nicht mehr überschrieben werden.

Damit die Farben im CMS gesetzt werden können muss das Icon wie folgt angelegt werden:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path stroke="currentColor" d="M16,1c8.3,0,15,6.7,15,15s-6.7,15-15,15S1,24.3,1,16S7.7,1,16,1M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0L16,0z"/>
  <circle fill="currentColor" cx="16" cy="16" r="7"/>
</svg>

Alle fill und stroke Attribute brauchen den Wert currentColor damit die Farbe dynamisch im CMS ausgewählt werden kann.

Das ist nun ein einfaches Beispiel. SVG Icons sind nicht immer so klein und einfach gestaltet.