1) Intro

In diesem Beitrag zeige ich euch, wie man mit CSS benutzerdefinierte Symbole für Listen in HTML mit CSS verwendet. Wir kennen alle die Standard-Aufzählungszeichen wie der Kreis (Siehe Beispiel unten) oder das Quadrat.

Das Ganze wirkt aber in den meisten Fällen etwas langweilig und unkreativ. Deshalb bietet es sich an, eigene und passende Aufzählungszeichen für Liste in Webseiten zu verwenden.

Dies erreicht man indem man ein Bild auf WordPress hochlädt und danach mit CSS das Icon der gewünschten Listen ersetzt.

2) Beispiel

Das ist eine Liste mit normale Bulletpoints/Aufzählungszeichen

  • Ich
  • bin
  • eine
  • normale
  • Liste

Das ist eine Liste mit spezifizierten Bulletpoints/Aufzählungszeichen

  • Ich
  • bin
  • eine
  • spezielle
  • Liste

3) Folgende Schritte sind notwendig:

  1. Icon hochladen
    Icon als Bild in die WordPress-Mediathek hochladen und relativen Pfad kopieren.
  2. Der Liste eine CSS-Klasse geben z.B.
    <ul class=”liste-spezial”>
    <li>Ich</li>
    <li>bin</li>
    <li>eine</li>
    <li>spezielle</li>
    <li>Liste</li>
    </ul>
  3. CSS definieren
    .liste-spezial {
    list-style: inside url(‘/wp-content/uploads/2021/01/lamp-ul.png’);
    }