Bild anstatt Aufzählungszeichen, auch im Menü

Anstatt der Aufzählungszeichen ein Bild darstellen. Das ergeht der Erstellung von kleinem Bild und weiter mit Auszeichnung von Class.

Bild PNG  oder SVG ab etwa 15px mal 15px ist geeignet. Dessen ist dann der Bearbeitung bspw. mit Boxy SVG in fixer Größe (also nicht Responsive) abzuspeichern. Denn zum Gebrauch hier, ist das im Nachhinein nicht so anpassbar.

List-Style-Image

Als erstes ist für die Aufzählungszeichen im Customizer oder Child-Theme eine Class zu erstellen. Bspw. die Class listbild:

/* Class für List-Style-Image */
.listbild {list-style-image:url(https://wegerl.at/wp-content/uploads/2019/03/classicpress.svg)
}

Im Editor / Text ist das dann mit dem Attributname und dem Eigenschaftswert, also die Class mit class="listbild":

<ul class="listbild">
 	<li>Die Aufzählungszeichen erhalten somit das definierte Bild.</li>
 	<li>Das Bild erscheint aber nicht Editors Visuelle.</li>

</ul>

Menüpunkte mit Image

Für die Menüpunkte ist erst mal im Customizer oder Child-Theme eine Class von bspw. menuepunkt zu erstellen.

/* Menüpunkt, Class "menuepunkt" */
.menuepunkt {list-style-image:url( https://wegerl.at/wp-content/uploads/2020/01/OpenClipart-Vectors_baum2.svg
);
padding-right: 5px;}

Oder, indes das Image nach dem Text sein soll:

/* Menüpunkt, Class "menuepunkt" */
.menuepunkt:after { content:url(https://wegerl.at/wp-content/uploads/2019/03/classicpress.svg);
padding-right: 5px;
}

Mit :before findet das Bild vor dem Text den Platz hingegen mit :after das Bild nach dem Text visuell ist.

Im Menü dann …

Evtl. nicht vergessen, Dashboard > Design > Menüs, oben Ansicht anpassen anklicken und 'CSS-Klassen' anhaken.

Je nach Menü ist den jeweiligen Menüpunkten die definierte CSS-Klasse einzugeben.

Hier im Bspw. die „CSS-Klassen (optional)“ funktionieren nicht mit Umlauten:

Also Beispiels richtig für CSS-Klassen (optional), „menuepunkt“.

Nach dem Abspeichern des Menüs sind die Menüpunkte mit Image.

Bspw. ein Menü direkt im 'Beitrag'

Das Menü hier direkt im Beitrag (s. u. den Link) bedarf es eines Codes in der functions.php. Sodann ist das im Editor mit Shortcode und dem Namen des Menüs einzugeben.

[menu name="Home Footer"]

… so zeigt sich:

Hinweis

CSS list-style für ul und ol