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

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.

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.

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

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 []menjadi\f058

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.

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

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>

DEMO DI SINI

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