Bild anstatt Aufzählungszeichen, auch im Menü

Anstatt der Aufzählungszeichen ein Bild visualisieren, ergeht der Erstellung geeigneten kleinen Bild und Auszeichnung mit Class.

Bild PNG  oder SVG etwa 15px mal 15px ist geeignet.

List-Style-Image

Im Customizer oder Child-Theme eine Class Beispiels listbild für Aufzählungszeichen erstellen:

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

Folglich im Texteditor mit Attributname und Eigenschaftswert 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

Im Customizer oder Child-Theme eine Class Beispiels menuepunkt für Menüpunkte erstellen. Je nach Anwendung mit Obigem, also selbe Auszeichnung mit padding-right.

Beispiel:

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

Oder –

/* Class "menuepunkt" Menü-Bild */
.menuepunkt:before { 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.

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

Den Menüpunkten das vorgesehenen Bild, die definierte CSS-Klasse eingeben. Bspw. „CSS-Klassen (optional)“ funktionieren nicht mit Umlauten, wie diesen Beispiel:

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

Zum Exempel s. Menü direkt auf Seite/Beitrag.

Hinweis

CSS list-style für ul und ol