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?
sumber
font-weight: 900;
Sesuai dengan Dokumentasi Huruf Keren :
Atau, menggunakan Jade:
sumber
<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
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:
sumber
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
:before
elemen pseudo bekerja paling baik. Saya aturpadding-left
pada ul, posisi negatif tersisa pada:before
elemen, sama dengan ulpadding-left
. Untuk mendapatkan jarak konten dari:before
elemen dengan benar, saya hanya mengaturpadding-left
li. Tentu saja li harus memiliki posisi relatif. Sebagai contohSemoga ini jelas dan memiliki nilai bagi orang lain selain saya.
sumber
Saya melakukannya seperti ini:
Atau Anda dapat mencoba ini jika Anda ingin mengubah warna:
sumber
Saya melakukan dua hal yang terinspirasi oleh komentar @OscarJovanny, dengan beberapa peretasan.
Langkah 1:
Langkah 2:
Hasil
sumber