Gaya daftar li khusus dengan ikon font-mengagumkan

Saya bertanya-tanya apakah mungkin untuk menggunakan kelas font-mengagumkan (atau font ikonik lainnya) untuk membuat jenis <li>gaya daftar kustom ?

Saat ini saya menggunakan jQuery untuk melakukan ini, yaitu:

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

Namun, ini tidak gaya dengan benar ketika <li>teks membungkus halaman karena menganggap ikon sebagai bagian dari teks, bukan indikator-peluru yang sebenarnya.

Ada tips?

The Lists CSS dan Loket Modul Level 3 memperkenalkan ::markerpseudo-elemen. Dari apa yang saya mengerti itu akan memungkinkan hal semacam itu. Sayangnya, tampaknya tidak ada browser yang mendukungnya .

Yang dapat Anda lakukan adalah menambahkan beberapa padding ke induk uldan tarik ikon ke padding itu:

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>

Sesuaikan bantalan / ukuran font / dll sesuai keinginan Anda, dan hanya itu. Inilah biola yang biasa: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Ini berfungsi dengan semua jenis font ikonik. FontAwesome, bagaimanapun, menyediakan cara mereka sendiri untuk menangani 'masalah' ini. Lihatlah jawaban Darrrrrren di bawah ini untuk lebih jelasnya.

Sesuai dengan Dokumentasi Huruf Keren :

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

Atau, menggunakan 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

Saya ingin memberikan alternatif, solusi yang lebih mudah yang khusus untuk FontAwesome. Jika Anda menggunakan font ikonik yang berbeda, jawaban JOPLOmacedo masih baik untuk digunakan.

FontAwesome sekarang menangani gaya daftar secara internal dengan kelas CSS .

Inilah contoh resmi:

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

Saya ingin menambahkan jawaban JOPLOmacedo. Solusinya adalah favorit saya, tetapi saya selalu memiliki masalah dengan indentasi ketika li memiliki lebih dari satu baris. Itu fiddly untuk menemukan lekukan yang benar dengan margin dll. Tapi ini mungkin hanya menyangkut saya.

Bagi saya pemosisian absolut :beforeelemen pseudo bekerja paling baik. Saya atur padding-leftpada ul, posisi negatif tersisa pada :beforeelemen, sama dengan ul padding-left. Untuk mendapatkan jarak konten dari :beforeelemen dengan benar, saya hanya mengatur padding-leftli. Tentu saja li harus memiliki posisi relatif. Sebagai contoh

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

Semoga ini jelas dan memiliki nilai bagi orang lain selain saya.

Saya melakukannya seperti ini:

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

Atau Anda dapat mencoba ini jika Anda ingin mengubah warna:

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

Saya melakukan dua hal yang terinspirasi oleh komentar @OscarJovanny, dengan beberapa peretasan.

Langkah 1:

• Unduh ikon file sebagai svg dari sini , karena saya hanya perlu ikon ini dari font yang mengagumkan

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

Hasil