19.09.2019 | Webentwicklung
Material IO CSS – Listen Elemente um Symbolik mit ::before Selector ergänzen

Der ein oder andere hat vielleicht schon nach der Möglichkeit gesucht HTML Listen-Elemente um eine Symbolik aus dem Pool der Icons von marterial.io zu ergänzen. Es gibt zwei Möglichkeiten das zu tun. Entweder über den Unicode oder über den Namen des Icons. Letzteres ist etwas eleganter und mit Sicherheit auch schneller. Im nachoflgendem Beispiel will ich als Symbolik den „double_arrow“ einsetzen. Dazu lege ich eine Klasse für meine Liste an und verändere sie an nur zwei kleinen Stellen.

Die Liste:

<ul class="special-list">
   <li>Mein Inhalt 1</li>
   <li>Mein Inhalt 2</li>
   <li>Mein Inhalt 3</li>
   <li>Mein Inhalt 4</li>
</ul>

Das entsprechende CSS dazu:
.basic-list li {
	list-style-type: none;
}

.basic-list li::before {
	font-family: 'Material Icons';
	content: 'double_arrow';
}

Mehr dazu:

geschrieben von Jens (keine Kommentare), , ,

Du kannst diese Seite via PayPal unterstützen: paypal.me/jensbh

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Mit und gemacht in Kassel / Nordhessen. 2022