Harika yazı tipi simgesiyle özel li liste stili

Özel bir <li>liste stili türü oluşturmak için font awesome (veya başka herhangi bir ikonik font) sınıfları kullanmak mümkün olup olmadığını merak ediyorum ?

Şu anda bunu yapmak için jQuery kullanıyorum, yani:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

Bununla birlikte, <li>metin sayfayı gerçek madde işareti göstergesi olarak değil, metnin bir parçası olarak gördüğü için sayfa boyunca sarıldığında bu düzgün bir şekilde biçimlenmez.

Herhangi bir ipucu?

CSS Listeleri ve Sayaçlar Modülü Seviye 3 tanıtır ::markersözde elemanı. Anladığım kadarıyla böyle bir şeye izin verecekti. Ne yazık ki, hiçbir tarayıcı bunu desteklemiyor gibi görünüyor .

Yapabileceğiniz şey ebeveyne biraz dolgu eklemek ulve simgeyi bu dolguya çekmek.

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>

Dolgu / yazı tipi boyutunu / vb. Beğeninize göre ayarlayın ve hepsi bu. İşte olağan keman: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Bu, her türlü ikonik yazı tipiyle çalışır. Ancak FontAwesome, bu 'sorun' ile başa çıkmak için kendi yollarını sunar. Daha fazla bilgi için Darrrrrren'in cevabına göz atın.

Gereğince Yazı Müthiş Dokümantasyon :

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

Veya Jade kullanarak:

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

FontAwesome'e özgü alternatif, daha kolay bir çözüm sunmak istiyorum. Farklı bir ikonik yazı tipi kullanıyorsanız, JOPLOmacedo'nun yanıtı hala mükemmel şekilde kullanılabilir.

FontAwesome artık liste stillerini CSS sınıflarıyla dahili olarak yönetiyor .

İşte resmi örnek:

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

JOPLOmacedo'nun cevabına eklemek istedim. Onun çözümü benim favorim, ama li'nin birden fazla çizgisi olduğunda her zaman girinti ile ilgili sorunum vardı. Kenar boşlukları vb. İle doğru girintiyi bulmak çok zordu. Ancak bu sadece beni ilgilendirebilir.

Benim için :beforesözde elemanın mutlak konumlandırılması en iyi sonucu verir. padding-leftUl üzerine ayarladım , :beforeelemanın üzerinde negatif pozisyon bıraktım, ul ile aynı padding-left. İçeriğin :beforesağ öğeden uzaklığını elde etmek padding-leftiçin li'yi ayarladım . Tabii ki li'nin göreli konumu olmalıdır. Örneğin

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 ... */
}

Umarım bu açıktır ve benden başka biri için bir değeri vardır.

Ben böyle yaptım:

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

Ya da rengini değiştirmek istiyorsanız bunu deneyebilirsiniz:

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

@OscarJovanny yorumundan esinlenerek iki şey yaptım, bazı hacklerle.

Aşama 1:

• İndirme simgeleri dosyasından svg olarak burada sadece yazı müthiş sadece bu simgeyi ihtiyaç olarak

Adım 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>

Sonuçlar