Gaya daftar li khusus dengan ikon font-mengagumkan


156

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?

Jawaban:


333

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.


12
Saya telah membuat halaman referensi kode konten CSS yang sesuai dengan setiap ikon Font Awesome di sini: astronautweb.co/snippet/font-awesome
Astrotim

1
Solusi ini bahkan bekerja dengan elemen multi-kolom. (Lainnya yang menggunakan posisi: absolut jangan)
sbaechler

2
@Astrotim Anda bisa mendapatkan kode-kode ini langsung dari cheatsheet FontAwesome resmi: fortawesome.github.io/Font-Awesome/cheatsheet
rybo111

1
Solusi ini perlu sedikit revisi untuk digunakan dengan FontAwesome 5. Anda memerlukan font-family: 'Font Awesome 5 Free'; serta bobot font yang eksplisit agar dapat bekerja. Lihat stackoverflow.com/questions/47894414/…
kloddant

1
Saya perlu menambahkan bobot tertentu agar ini berfungsi:font-weight: 900;
mayersdesign

62

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

Ini berhasil bagi saya seperti ini<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
justin.m.chase

50

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>

18
Dengan Font-Awesome terakhir Anda harus mengganti "icons-ul" dengan "fa-ul" dan "icon-li" oleh "fa-li": [code] <ul class = "fa-ul"> <li class = " fa-li fa fa-check "> ... </li> </ul> [/ code]
Thomas

4

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.


3
Untuk semua pemula, ini diformat dalam bahasa preprocessing CSS yang disebut SASS. CSS murni tidak dapat disarangkan dengan cara ini.
JoshWillik

1

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

0

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

masukkan deskripsi gambar di sini

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.