Niestandardowy styl listy li z ikoną niesamowitej czcionki

Zastanawiam się, czy możliwe jest użycie klas font-awesome (lub jakiejkolwiek innej kultowej czcionki) do utworzenia niestandardowego typu <li>listy?

Obecnie używam do tego jQuery, tj .:

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

Jednak styl ten nie jest prawidłowy, gdy <li>tekst zawija się na stronie, ponieważ uważa, że ​​ikona jest częścią tekstu, a nie faktycznym wskaźnikiem punktora.

Jakieś wskazówki?

Moduł Listy CSS i liczniki poziomu 3 wprowadza ::markerpseudoelement. Z tego, co zrozumiałem, pozwoliłoby na coś takiego. Niestety, wydaje się, że żadna przeglądarka tego nie obsługuje .

Możesz dodać trochę wypełnienia do rodzica uli przeciągnąć ikonę do tego wypełnienia:

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>

Dostosuj dopełnienie / rozmiar czcionki / etc do swoich upodobań i to wszystko. Oto zwykłe skrzypce: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Działa to z każdym typem kultowej czcionki. FontAwesome zapewnia jednak własny sposób radzenia sobie z tym „problemem”. Sprawdź odpowiedź Darrrrrren poniżej, aby uzyskać więcej informacji.

Zgodnie z dokumentacją Font Awesome :

<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>

Lub używając 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

Chciałbym zapewnić alternatywne, łatwiejsze rozwiązanie, które jest specyficzne dla FontAwesome. Jeśli używasz innej kultowej czcionki, odpowiedź JOPLOmacedo jest nadal idealna do użytku.

FontAwesome teraz obsługuje style list wewnętrznie za pomocą klas CSS .

Oto oficjalny przykład:

<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>

Chciałem dodać do odpowiedzi JOPLOmacedo. Jego rozwiązanie jest moim ulubionym, ale zawsze miałem problem z wcięciami, gdy li miał więcej niż jedną linię. Trudno było znaleźć właściwe wcięcie z marginesami itp. Ale to może dotyczyć tylko mnie.

U mnie :beforenajlepiej sprawdza się absolutne pozycjonowanie pseudoelementu. Ustawiłem padding-leftna ul, na :beforeelemencie pozostawiono ujemne położenie , tak samo jak ul padding-left. Aby uzyskać odległość zawartości od :beforeelementu w prawo, po prostu ustawiłem padding-leftna li. Oczywiście li musi mieć pozycję względną. Na przykład

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 ... */
}

Mam nadzieję, że jest to jasne i ma jakąś wartość dla kogoś innego niż ja.

Zrobiłem to tak:

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

Lub możesz spróbować tego, jeśli chcesz zmienić kolor:

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;
}

Zrobiłem dwie rzeczy zainspirowane komentarzem @OscarJovanny, z kilkoma sztuczkami.

Krok 1:

• Pobierz plik ikon jako svg stąd , ponieważ potrzebuję tylko tej ikony z niesamowitej czcionki

Krok 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>

Wyniki