ลิสต์แบบกำหนดเอง li พร้อมไอคอนแบบอักษรสุดยอด

ฉันสงสัยว่ามันเป็นไปได้ที่จะใช้คลาส font-awesome (หรือแบบอักษร iconic อื่น ๆ ) เพื่อสร้าง<li>list-style-type แบบกำหนดเองหรือไม่?

ฉันกำลังใช้ jQuery เพื่อทำสิ่งนี้เช่น:

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

อย่างไรก็ตามสิ่งนี้ไม่ได้มีรูปแบบที่เหมาะสมเมื่อ<li>ข้อความล้อมรอบหน้าเว็บเนื่องจากถือว่าไอคอนเป็นส่วนหนึ่งของข้อความไม่ใช่ตัวแสดงหัวข้อย่อยที่แท้จริง

เคล็ดลับใด ๆ

รายการ CSS และเคาน์เตอร์โมดูล Level 3แนะนำ::markerองค์ประกอบหลอก จากสิ่งที่ฉันเข้าใจมันจะอนุญาตสิ่งนี้ แต่น่าเสียดายที่เบราว์เซอร์ไม่มีดูเหมือนว่าจะสนับสนุนมัน

สิ่งที่คุณสามารถทำได้คือเพิ่มช่องว่างภายในไปยังพาเรนต์ulและดึงไอคอนไปที่ช่องว่างภายใน:

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>

ปรับ padding / font-size / etc ตามที่คุณต้องการ นี่คือซอธรรมดา: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

ใช้งานได้กับแบบอักษรสัญลักษณ์ทุกประเภท อย่างไรก็ตาม FontAwesome นำเสนอวิธีการของตนเองในการจัดการกับปัญหานี้ ตรวจสอบคำตอบของ Darrrrrren ด้านล่างสำหรับรายละเอียดเพิ่มเติม

ตามเอกสาร Font Awesome :

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

หรือใช้ Jade:

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 หากคุณใช้แบบอักษรที่เป็นสัญลักษณ์ที่แตกต่างกันคำตอบของ JOPLOmacedo ก็ยังคงใช้ได้อย่างสมบูรณ์แบบ

FontAwesome ตอนนี้จัดการรูปแบบรายการภายในกับคลาส

นี่คือตัวอย่างเป็นทางการ:

<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 วิธีแก้ปัญหาของเขาคือสิ่งที่ฉันชอบ แต่ฉันมักจะมีปัญหากับการเยื้องเมื่อ li มีมากกว่าหนึ่งบรรทัด มันเป็นการเที่ยวยุ่งยิ่งเพื่อค้นหาการเยื้องที่ถูกต้องด้วยระยะขอบ ฯลฯ แต่นี่อาจเกี่ยวข้องกับฉันเท่านั้น

สำหรับฉันการวางตำแหน่งที่แน่นอนของ:beforeองค์ประกอบหลอกทำงานได้ดีที่สุด ผมตั้งpadding-leftบน UL ตำแหน่งเชิงลบด้านซ้ายบนองค์ประกอบเช่นเดียวกับของยู:before padding-leftเพื่อให้ได้ระยะทางของเนื้อหาจาก:beforeองค์ประกอบด้านขวาฉันเพิ่งตั้งค่าpadding-leftบน li แน่นอนว่าต้องมีตำแหน่งญาติ ตัวอย่างเช่น

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

หวังว่านี่จะชัดเจนและมีค่าสำหรับคนอื่นกว่าฉัน

ฉันทำแบบนี้:

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

หรือคุณสามารถลองวิธีนี้ถ้าคุณต้องการเปลี่ยนสี:

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 พร้อมแฮ็กบางอย่าง

ขั้นตอนที่ 1:

• ดาวน์โหลดไฟล์ไอคอนเป็น svg จากที่นี่เพราะฉันต้องการเพียงไอคอนนี้จากแบบอักษรที่ยอดเยี่ยมเท่านั้น

ขั้นตอนที่ 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>

ผล