Benutzerdefinierte Li-Liste-Stil mit Font-awesome Symbol

Ich frage mich, ob es möglich ist, font-awesome-Klassen (oder andere ikonische Schriftarten) zu verwenden, um eine benutzerdefinierte Klasse zu erstellen <li> Listenstil .

Ich verwende derzeit jQuery, um dies zu tun, dh:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

Dies ist jedoch nicht richtig, wenn der <li>Text die Seite umschließt, da das Symbol als Teil des Textes betrachtet wird und nicht als eigentlicher Aufzählungszeichen.

Irgendwelche Tipps?

Das CSS-Listen- und Zählermodul Level 3 führt das ::markerPseudoelement ein. Soweit ich verstanden habe, würde es so etwas erlauben. Leider scheint kein Browser dies zu unterstützen .

Was Sie tun können, ist, dem übergeordneten Element eine Auffüllung hinzuzufügen ulund das Symbol in diese Auffüllung zu ziehen:

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Passen Sie die Polsterung / Schriftgröße / usw. nach Ihren Wünschen an, und fertig. Hier ist die übliche Geige: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Dies funktioniert mit jeder Art von Symbolschrift. FontAwesome bietet jedoch eine eigene Möglichkeit, mit diesem „Problem“ umzugehen. Weitere Informationen finden Sie in der Antwort von Darrrrrren unten.

Gemäß der Font Awesome-Dokumentation :

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

Oder mit Jade:

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

Ich möchte eine alternative, einfachere Lösung anbieten, die spezifisch für FontAwesome ist. Wenn Sie eine andere Symbolschrift verwenden, ist die Antwort von JOPLOmacedo immer noch vollkommen in Ordnung.

FontAwesome verarbeitet Listenstile jetzt intern mit CSS-Klassen .

Hier ist das offizielle Beispiel:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Ich wollte JOPLOmacedos Antwort ergänzen. Seine Lösung ist meine Lieblingslösung, aber ich hatte immer Probleme mit der Einrückung, wenn der Li mehr als eine Zeile hatte. Es war fummelig, die richtige Einrückung mit Rändern usw. zu finden. Aber das könnte nur mich betreffen.

Für mich :beforefunktioniert die absolute Positionierung des Pseudoelements am besten. Ich setze padding-leftauf ul, negative Position links auf dem :beforeElement, genau wie bei ul padding-left. Um den Abstand des Inhalts vom :beforeElement richtig zu machen, setze ich einfach das padding-leftauf das li. Natürlich muss der Li eine relative Position haben. Beispielsweise

ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  /* make space for li's :before */
  list-style: none;
}

li {
  position: relative;
  padding-left: 0.4em;
  /* text distance to icon */
}

li:before {
  font-family: 'my-icon-font';
  content: 'character-code-here';
  position: absolute;
  left: -1em;
  /* same as ul padding-left */
  top: 0.65em;
  /* depends on character, maybe use padding-top instead */
  /*  .... more styling, maybe set width etc ... */
}

Hoffentlich ist das klar und hat einen Wert für jemand anderen als mich.

Ich habe es so gemacht:

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

Oder Sie können dies versuchen, wenn Sie die Farbe ändern möchten:

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}

Ich habe zwei Dinge gemacht, die vom Kommentar von @OscarJovanny inspiriert waren, mit einigen Hacks.

Schritt 1:

• Laden Sie die Icons-Datei als SVG von hier herunter , da ich nur dieses Icon von font awesome brauche

Schritt 2:

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

Ergebnisse