Benutzerdefinierte Li-Liste-Stil mit Font-awesome Symbol

156

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?

Darrrrrren
quelle

Antworten:

332

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.

Banzomaikaka
quelle
12
Ich habe eine Referenzseite der CSS-
Inhaltscodes erstellt
1
Diese Lösung funktioniert sogar mit mehrspaltigen Elementen. (Andere, die Position verwenden: absolut nicht)
sbaechler
2
@Astrotim Sie können diese Codes direkt vom offiziellen FontAwesome-Cheatsheet erhalten: fortawesome.github.io/Font-Awesome/cheatsheet
rybo111
1
Diese Lösung muss für die Verwendung mit FontAwesome 5 geringfügig überarbeitet werden. Sie benötigen eine Schriftfamilie: 'Font Awesome 5 Free'; sowie eine explizite Schriftgröße, damit es funktioniert. Siehe stackoverflow.com/questions/47894414/…
kloddant
1
Ich muss ein bestimmtes Gewicht hinzufügen, damit dies funktioniert:font-weight: 900;
mayersdesign
61

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
Cutemachine
quelle
Dies funktionierte für mich so<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
justin.m.chase
50

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>
Darrrrrren
quelle
18
Mit last Font-Awesome müssen Sie "icons-ul" durch "fa-ul" und "icon-li" durch "fa-li" ersetzen: [code] <ul class = "fa-ul"> <li class = " fa-li fa fa-check "> ... </ li> </ ul> [/ code]
Thomas
4

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.

habsi
quelle
3
Für alle Anfänger ist dies in einer CSS-Vorverarbeitungssprache namens SASS formatiert. Reines CSS kann auf diese Weise nicht verschachtelt werden.
JoshWillik
1

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;
}
Oscar Jovanny
quelle
0

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

Geben Sie hier die Bildbeschreibung ein

Bedram Tamang
quelle