Listenpunkte durch Fontawesome Symbole erstzen

Lupus_III · 25. Oktober 2023

Hallo zusammen,

ich brauche mal wieder euer Schwarmwissen.

Ich mache gerade eine Webseite mit mehreren Listen. Einige dieser Liste sollen keine Punkte sondern Fontawesome Symbole haben, alle anderen nur Punkte. Ich habe versucht die betreffenden <ul><li> mit einer classe list-style: none; zu kennzeichen. Leider klappt das nicht. Hat jemand eine andere/ bessere Idee?

Code

list-style: none;

Sempervivum · 25. Oktober 2023

Selfhtml sagt dazu:

Zitat

Die Eigenschaft list-style ist eine Zusammenfassende Eigenschaft der möglichen Einzelangaben zu list-style-type, list-style-position und list-style-image.

HTML/Tutorials/Listen/Gestaltung mit CSS – SELFHTML-Wiki

Anscheinend streikt der Browser wenn Du nur eine Eigenschaft an gibst. Mit list-style-type sollte es funktionieren.

Lupus_III · 26. Oktober 2023

Danke Sempervivum für den Fingerzeig.

Ich habe jetzt mal recheriert und rumprobiert. Den Code wie es bei mir richtig angezeigt wird schreibe ich nachfolgend. Vielleicht kann es ja jemand mal brauchen.

HTML

HTML
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=ul, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="check1">1</li>
        <li class="check1">2</li>
        <li class="check1">3</li>
        <li class="check1">4</li>
        <li class="check1">5</li>
    </ul>

    <ul>
        <li class="check2">1</li>
        <li class="check2">2</li>
        <li class="check2">3</li>
        <li class="check2">4</li>
        <li class="check2">5</li>
    </ul>
</body>
</html>

Alles anzeigen

Code

CSS

ul .check1{
   
    list-style-type: "✔";
   
}
ul  .check2{
    list-style-type: "\1F44D";    
}

MrMurphy · 26. Oktober 2023

Oder auch mit etwas übersichtlicherem HTML:

HTML:

Code

      <ul class="check3">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
      </ul>
      <ul class="check4">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
      </ul>

Alles anzeigen

CSS:

Code

      .check3 li {
         list-style-type: "✔";
      }
      .check4 li {
         list-style-type: "\1F44D";    
      }

Lupus_III · 27. Oktober 2023

Super, danke! Noch schlanker! Weißt Du, wo man eine Auflistung der Zeichen wie "\1F44D" finden kann?

MrMurphy · 27. Oktober 2023

Eine lange Auflistung kenne ich nicht. Schau dir mal folgende Seite an:

SYMBL (◕‿◕) Symbole, Emoji, Zeichen, Schriften, Alphabete, Hieroglyphen und der gesamte Unicode

Webservice für die Suche nach Unicode-Zeichen. Suchen, kopieren und fügen Sie beliebige Zeichen ein: 😎 Emoji, ❤ Herz, 💲 Währungen, → Pfeile und mehr 🚩

symbl.cc

Du musst dich da etwas durchklicken, ich finde die Seite etwas unübersichtlich. Ein direktes Beispiel

👀 - Augen Emoji 👀 Körperteile aus der Kategorie 🙏 Menschen & Körper, Unicode-Nummer: U+1F440 📖 Bedeutung erfahren und ✂ Symbol kopieren

Emoji symbol: 👀, Name des Zeichen: augen, Unicode-Nummer für das Zeichen: U+1F440, das Zeichen ist im Block enthalten: Miscellaneous Symbols and Pictographs.

symbl.cc

Oder dein 1F44D:

👍 - Daumen hoch Zeichen Emoji oder Daumen Hoch 👍 Geschlossene Hand mit den Fingern aus der Kategorie 🙏 Menschen & Körper, Unicode-Nummer: U+1F44D 📖 Bedeutung erfahren und ✂ Symbol kopieren

Emoji symbol: 👍, Name des Zeichen: daumen hoch zeichen, Unicode-Nummer für das Zeichen: U+1F44D, das Zeichen ist im Block enthalten: Miscellaneous Symbols and…

symbl.cc

Wenn du die Bezeichnung hast und wissen willst welches Zeichen dahintersteckt kannst du die Bezeichnung also direkt in die Adressleiste deines Browsers eingeben.

Lupus_III · 27. Oktober 2023

lichen Dank!

Listenpunkte durch Fontawesome Symbole erstzen

Jetzt mitmachen!

Teilen

Tags