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)
}

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 menüpunkt für Menüpunkte erstellen:

/* Class: für Menü-Bild */
.menüpunkt:before { content:url(https://wegerl.at/wp-content/uploads/2019/03/classicpress.svg);
}

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.

Menüpunkten vorgesehenen Bild die definierte CSS-Klasse eingeben:

Hinweis

CSS list-style für ul und ol

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

DSGVO: Blog Website wegerl.at bedient sich dem Dienst Gravatar der Automattic Inc. In Angabe der E-Mail-Adresse, welche deiner Nutzung von Gravatar, erfolgt der Service nach Art. 6 Abs. 1 lit. f) DSGVO. – und nachdem dein Kommentar von wegerl.at freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.