Menggunakan ikon Font Awesome untuk poin-poin, dengan elemen item daftar tunggal


131

Kami ingin dapat menggunakan ikon Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) sebagai titik poin untuk daftar tidak berurutan dalam CMS.

Editor teks pada CMS hanya menghasilkan HTML mentah sehingga elemen / kelas tambahan tidak dapat ditambahkan.

Ini berarti menampilkan ikon ketika mark up terlihat seperti ini:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Masalah pertama yang saya lihat jika Font Awesome memerlukan atribut font-family yang berbeda, yang akan membutuhkan elemen terpisah.

Apakah ini mungkin menggunakan CSS murni? Atau haruskah saya menambahkan elemen ke awal setiap item daftar menggunakan sesuatu seperti jQuery?

Saya menyadari bahwa kita dapat menggunakan gambar latar belakang, tetapi alangkah baiknya jika menggunakan Font Awesome jika memungkinkan.

Jawaban:


248

Larutan:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

Berikut adalah posting blog yang menjelaskan teknik ini secara mendalam.


18
Daftar terjemahan yang berguna dari ikon font-mengagumkan ini untuk nilai-nilai css ada di sini: astronautweb.co/snippet/font-awesome
Scott C Wilson

24
Anda harus memasukkan ini untuk menghapus poinul { list-style-type: none; }
Edd

Mengapa metode ini tidak berfungsi ketika saya memiliki dua daftar di halaman yang sama?
deKajoo

6
Sangat bagus, satu-satunya hal yang saya sarankan untuk berbaris lebih baik adalah menggunakan margin: 0 0.2em 0 -1.2em;hanya menambah / mengurangi dua nilai dengan jumlah yang sama untuk mendapatkan jarak yang diinginkan. Jika Anda menggunakan nilai piksel tetap yang tidak sesuai dengan font Anda, Anda akan melihat perbedaan pada item daftar multiline.
rem

Saya menambahkan awalan ul untuk ini kalau tidak akan mencoba melakukannya jika klien menggunakan cms untuk membuat daftar (nomor) daftar
rtpHarry

154

Fontawesome baru (versi 4.0.3) membuat ini sangat mudah dilakukan. Kami cukup menggunakan kelas-kelas berikut:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

Sesuai url ini (baru): http://fontawesome.io/examples/#list


12
Ini harus menjadi jawaban yang benar, dengan versi fa yang baru. Bagus sekali, terima kasih atas penjelasan ini.
David

23
Saya tidak setuju, pertanyaan yang diajukan untuk solusi menggunakan satu daftar di CSS murni. Ini menggunakan HTML tambahan, serta kelas. Meskipun ini merupakan cara yang ditentukan oleh dokumen FA untuk melakukan ini, secara teknis ini bukan solusi untuk pertanyaan tersebut, dan tidak berguna jika Anda ingin melakukan ini tanpa mengubah output HTML Anda.
Ryan

Saya tahu tujuan Anda - tetapi orang-orang yang tidak terus-menerus menulis CSS murni dalam situasi di mana mereka tidak dapat memodifikasi HTML mereka ???? (serius, silakan lihat mengubah kerangka kerja web Anda) akan membutuhkan penyegaran memori kueri google mereka untuk menautkan ke cara dokumen yang benar 'font awesome, disandingkan dengan jawaban' aktual ', di samping satu sama lain untuk memutuskan. Saya tidak bermaksud mengatakan "tidak hanya ada satu jawaban yang benar untuk masalah ini" tetapi tidak ada ...
lol

1
Pendekatan ini tidak bekerja dengan baik dengan elemen daftar yang membungkus ke beberapa baris, karena identifikasi pada baris tambahan tidak akan diperluas untuk memasukkan lebar ikon.
Lars Haugseth

2
Mungkin perlu ditambahkan, dengan FA 4.3 (mungkin versi lain juga) dan Bootstrap 3, item uldan liperlu diatur position: relativekarena fa-liitem diposisikan absolut. Kalau tidak, mereka semua akan melayang ke kiri atas.
Jeremy Harris

14

Saya ingin membangun beberapa jawaban di atas dan diberikan di tempat lain dan menyarankan menggunakan posisi absolut bersama dengan : sebelum kelas semu . Banyak contoh di atas (dan dalam pertanyaan serupa) menggunakan markup HTML khusus, termasuk metode penanganan Font Awesome. Ini bertentangan dengan pertanyaan awal, dan tidak sepenuhnya diperlukan.

DEMO DI SINI

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

Pada dasarnya itu. Anda bisa mendapatkan nilai ISO untuk digunakan dalam konten CSS pada cheatsheet Font Awesome . Cukup gunakan 4 alfanumerik terakhir yang diawali dengan garis miring terbalik. Jadi [&#xf058;]menjadi\f058


4

Ada contoh cara menggunakan Font Awesome di samping daftar yang tidak diurutkan pada halaman contoh mereka .

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

Jika Anda tidak dapat menemukannya berfungsi setelah mencoba kode ini maka Anda tidak memasukkan pustaka dengan benar. Menurut situs web mereka, Anda harus memasukkan perpustakaan seperti itu:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Juga lihat posting Chris Coyier yang aneh tentang font ikon di situs webnya CSS Trik .

Ini adalah screencast olehnya juga berbicara tentang cara membuat ikon font-face Anda sendiri.


2
Anda tidak perlu markup tambahan: li:beforedapat memiliki font-family yang berbeda dari liitu sendiri.
cimmanon

@cimmanon: Meskipun Anda memang benar, dokumentasi untuk Font Awesome menyarankan Anda untuk memiliki markup tambahan. Secara teknis itu tidak diperlukan, namun, saya merasa mungkin memerlukan penggalian melalui mesin terbang font untuk mengetahui kunci mana yang dipetakan ke simbol mana. Ini akan membutuhkan waktu dan kesabaran, tetapi tentu saja, solusi Anda akan berhasil juga.
cereallarceny

@cereallarceny - masalah yang kita miliki adalah editor HTML (TinyMCE) untuk CMS menghasilkan format yang saya berikan dalam pertanyaan saya. Jadi dari perspektif itu kami tidak memiliki kontrol atas daftar HTML. Kecuali jika kita mengkonfigurasi TinyMCE untuk memasukkan elemen i (dan tidak menghapusnya sebagai elemen kosong).
BaronGrivet

Jadi Anda tidak memiliki akses ke HTML, apakah Anda memiliki akses ke CSS?
cereallarceny

Ya, lengkapi akses ke CSS.
BaronGrivet

1

@Tama, Anda mungkin ingin memeriksa jawaban ini: Menggunakan ikon Font Awesome sebagai bullet

Pada dasarnya Anda dapat melakukannya dengan hanya menggunakan CSS tanpa perlu markup tambahan seperti yang disarankan oleh FontAwesome dan jawaban lain di sini.

Dengan kata lain, Anda dapat mencapai apa yang Anda butuhkan menggunakan markup dasar yang sama yang Anda sebutkan di posting awal Anda:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Terima kasih.


1

Solusi saya menggunakan standar <ul>dan <i>di dalam<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

masukkan deskripsi gambar di sini

DEMO DI SINI


1

Di Font Awesome 5 dapat dilakukan menggunakan CSS murni seperti pada beberapa jawaban di atas dengan beberapa modifikasi.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

Tanpa font-weight yang benar, itu hanya akan menampilkan kotak kosong.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

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.