การใช้ไอคอนตัวอักษรที่ยอดเยี่ยมสำหรับสัญลักษณ์แสดงหัวข้อย่อยที่มีองค์ประกอบรายการเดียว

เราต้องการที่จะใช้ไอคอนFont Awesome ( http://fortawesome.github.com/Font-Awesome/ ) เป็นสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการที่ไม่มีการเรียงลำดับใน CMS

เท็กซ์เอดิเตอร์บน CMS จะเอาต์พุต HTML แบบ raw เท่านั้นดังนั้นอิลิเมนต์ / คลาสเพิ่มเติมไม่สามารถเพิ่มได้

นี่หมายถึงการแสดงไอคอนเมื่อมาร์คอัพมีลักษณะดังนี้:

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

ปัญหาแรกที่ฉันสามารถดูได้ว่า Font Awesome ต้องการแอตทริบิวต์ font-family ที่แตกต่างกันหรือไม่ซึ่งจะต้องใช้องค์ประกอบแยกต่างหาก

เป็นไปได้โดยใช้ CSS บริสุทธิ์หรือไม่ หรือฉันจะต้องผนวกองค์ประกอบไปที่จุดเริ่มต้นของแต่ละรายการโดยใช้บางสิ่งบางอย่างเช่น jQuery

ฉันรู้ว่าเราสามารถใช้แบ็คกราวด์แบ็คกราวด์ได้ แต่จะดีมากถ้าใช้ Font Awesome หากเป็นไปได้

สารละลาย:

http://jsfiddle.net/VR2hP/

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

นี่คือโพสต์บล็อกซึ่งอธิบายเทคนิคนี้ในเชิงลึก

fontawesome ใหม่ (เวอร์ชั่น 4.0.3) ทำให้ง่ายต่อการทำ เราเพียงแค่ใช้คลาสต่อไปนี้:

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

ตาม URL (ใหม่) นี้: http://fontawesome.io/examples/#list

ฉันต้องการสร้างคำตอบบางข้อด้านบนและให้ที่อื่นและแนะนำให้ใช้การจัดตำแหน่งแบบสัมบูรณ์พร้อมกับ : ก่อนที่ชั้นหลอก ตัวอย่างข้างต้นจำนวนมาก (และในคำถามที่คล้ายกัน) กำลังใช้มาร์กอัพ HTML ที่กำหนดเองรวมถึงวิธีการจัดการของ Font Awesome สิ่งนี้ขัดกับคำถามเดิมและไม่จำเป็นอย่างเคร่งครัด

สาธิตที่นี่

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

แค่นั้นแหละ คุณสามารถได้รับค่า ISO สำหรับใช้ในเนื้อหา CSS ในFont cheatsheet เพียงใช้ตัวอักษรและตัวเลข 4 ตัวสุดท้ายนำหน้าด้วยแบ็กสแลช ดังนั้น[]กลายเป็น\f058

มีตัวอย่างของวิธีการใช้ตัวอักษรที่น่ากลัวข้างในรายการเรียงลำดับของพวกเขาเป็นหน้าตัวอย่าง

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

หากคุณไม่สามารถใช้งานได้หลังจากลองใช้รหัสนี้แสดงว่าคุณไม่ได้รวมไลบรารีอย่างถูกต้อง ตามเว็บไซต์ของพวกเขาคุณควรรวมไลบรารีดังกล่าว:

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

ตรวจสอบออกอย่างกระทันหันโพสต์คริส Coyier ในแบบอักษรไอคอนบนเว็บไซต์ของเขาเคล็ดลับ CSS

นี่คือหน้าจอของเขาและพูดคุยเกี่ยวกับวิธีสร้างแบบอักษรไอคอนของคุณเอง

@ Tama คุณอาจต้องการตรวจสอบคำตอบนี้: การใช้ไอคอนตัวอักษรยอดเยี่ยมเป็นสัญลักษณ์แสดงหัวข้อย่อย

โดยทั่วไปคุณสามารถทำได้โดยใช้ CSS เท่านั้นโดยไม่จำเป็นต้องใช้มาร์กอัปพิเศษตามที่แนะนำโดย FontAwesome และคำตอบอื่น ๆ ที่นี่

ในคำอื่น ๆ คุณสามารถบรรลุสิ่งที่คุณต้องการโดยใช้มาร์กอัปพื้นฐานเดียวกันกับที่คุณกล่าวถึงในโพสต์เริ่มต้นของคุณ:

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

ขอบคุณ

โซลูชันของฉันใช้มาตรฐาน<ul>และ<i>ภายใน<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>

สาธิตที่นี่

ใน Font Awesome 5 สามารถทำได้โดยใช้ CSS บริสุทธิ์เช่นเดียวกับบางคำตอบข้างต้นพร้อมการแก้ไขบางอย่าง

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

หากไม่มีฟอนต์น้ำหนักที่ถูกต้องจะแสดงเฉพาะสี่เหลี่ยมจตุรัสที่ว่างเปล่าเท่านั้น

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