Madde işaretleri için Yazı Tipi Başar simgesini tek bir liste öğesi ile kullanma

Bir CMS'deki sırasız listeler için bir madde işareti olarak bir Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) simgesi kullanabilmeyi istiyoruz .

CMS'deki metin düzenleyicisi yalnızca ham HTML çıkarır, bu nedenle ek öğeler / sınıflar eklenemez.

Bu, işaret şu şekilde göründüğünde simgelerin görüntülenmesi anlamına gelir:

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

Font Awesome'in ayrı bir öğe gerektirecek farklı bir font-family özelliği gerektirip gerektirmediğini görebildiğim ilk sorun.

Bu saf CSS kullanılarak mümkün müdür? Ya da öğeyi jQuery gibi bir şey kullanarak her liste öğesinin başına eklemem gerekir mi?

Bir arka plan resminin geri dönüşünü kullanabileceğimizin farkındayım, ancak mümkünse Font Awesome'i kullanmak harika olur.

Çözüm:

http://jsfiddle.net/VR2hP/

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

İşte bu tekniği derinlemesine açıklayan bir blog yazısı .

Yeni fontawesome (sürüm 4.0.3), bunu gerçekten kolaylaştırır. Sadece aşağıdaki sınıfları kullanıyoruz:

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

Bu (yeni) url'ye göre: http://fontawesome.io/examples/#list

Yukarıdaki ve başka bir yerde verilen cevaplardan bazılarının üzerine inşa etmek ve mutlak konumlandırmanın : önce sözde sınıfla birlikte kullanılmasını önermek istiyorum . Yukarıdaki örneklerin çoğu (ve benzer sorularda), Font Awesome'in işleme yöntemi dahil olmak üzere özel HTML işaretlemesini kullanıyor. Bu, asıl soruya aykırıdır ve kesinlikle gerekli değildir.

BURADAN DEMO

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

Bu temelde bu. CSS içeriğinde kullanmak için ISO değerini Font Awesome hile sayfasında alabilirsiniz . Ters eğik çizgi ön ekli son 4 alfanümerik karakteri kullanmanız yeterlidir. Yani []olur\f058

Örnek sayfalarında sırasız bir listenin yanında Font Awesome'in nasıl kullanılacağına dair bir örnek var .

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

Bu kodu denedikten sonra çalıştığını bulamıyorsanız, kitaplığı doğru şekilde eklemiyorsunuz demektir. Web sitelerine göre, kütüphaneleri şu şekilde eklemelisiniz:

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

Ayrıca, tuhaf Chris Coyier'in web sitesi CSS Tricks'deki simge yazı tipleriyle ilgili gönderisine bakın .

İşte kendisi tarafından hazırlanan bir ekran kaydı ve kendi simge yazı tipi yüzünüzü nasıl oluşturacağınız hakkında konuşuyor.

@Tama, şu yanıtı kontrol etmek isteyebilirsiniz: Madde işaretleri olarak Font Awesome simgelerini kullanma

Temel olarak bunu, FontAwesome ve buradaki diğer cevapların önerdiği ekstra işaretlemeye gerek kalmadan yalnızca CSS kullanarak gerçekleştirebilirsiniz.

Başka bir deyişle, ilk gönderinizde bahsettiğiniz aynı temel işaretlemeyi kullanarak ihtiyacınız olan şeyi başarabilirsiniz:

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

Teşekkürler.

Standart <ul>ve <i>içeriyi kullanan çözümüm<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>

BURADAN DEMO

Font Awesome 5'te yukarıdaki cevapların bazılarında olduğu gibi bazı değişikliklerle saf CSS kullanılarak yapılabilir.

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

Doğru yazı tipi ağırlığı olmadan, yalnızca boş bir kare gösterecektir.

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