Sử dụng biểu tượng Font Awesome cho các dấu đầu dòng, với một thành phần mục danh sách

Chúng tôi muốn có thể sử dụng biểu tượng Phông chữ Tuyệt vời ( http://fortawclaw.github.com/Font-Aw đũa / ) làm điểm nhấn cho danh sách không có thứ tự trong CMS.

Trình soạn thảo văn bản trên CMS chỉ xuất ra HTML thô để có thể thêm các thành phần / lớp bổ sung.

Điều này có nghĩa là hiển thị các biểu tượng khi đánh dấu trông như thế này:

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

Vấn đề đầu tiên tôi có thể thấy nếu Font Awesome yêu cầu một thuộc tính họ phông chữ khác, sẽ yêu cầu một yếu tố riêng biệt.

Điều này có thể sử dụng CSS thuần túy không? Hoặc tôi sẽ phải nối phần tử vào đầu mỗi mục danh sách bằng cách sử dụng cái gì đó như jQuery?

Tôi nhận ra rằng chúng ta có thể sử dụng một hình ảnh nền, nhưng thật tuyệt khi sử dụng Font Awesome nếu có thể.

Giải pháp:

http://jsfiddle.net/VR2hP/

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

Đây là một bài viết trên blog giải thích kỹ thuật này chuyên sâu.

Các fontawgie mới (phiên bản 4.0.3) làm cho điều này thực sự dễ dàng để làm. Chúng tôi chỉ đơn giản sử dụng các lớp sau:

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

Theo url (mới) này: http://fontawclaw.io/examples/#list

Tôi muốn xây dựng một số câu trả lời ở trên và đưa ra ở nơi khác và đề nghị sử dụng định vị tuyệt đối cùng với : trước lớp giả . Rất nhiều ví dụ ở trên (và trong các câu hỏi tương tự) đang sử dụng đánh dấu HTML tùy chỉnh, bao gồm cả phương pháp xử lý của Font Awesome. Điều này đi ngược lại câu hỏi ban đầu và không thực sự cần thiết.

DEMO TẠI ĐÂY

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

Về cơ bản là vậy. Bạn có thể nhận giá trị ISO để sử dụng trong nội dung CSS trên áo phông Font Awesome . Chỉ cần sử dụng 4 chữ số cuối cùng có tiền tố với dấu gạch chéo ngược. Vì vậy, []trở thành\f058

Có một ví dụ về cách sử dụng Font Awesome cùng với danh sách không có thứ tự trên trang ví dụ của họ .

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

Nếu bạn không thể tìm thấy nó hoạt động sau khi thử mã này thì bạn không bao gồm thư viện chính xác. Theo trang web của họ, bạn nên bao gồm các thư viện như sau:

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

Ngoài ra, hãy xem bài đăng của Chris Coyier hay thay đổi về phông chữ biểu tượng trên trang web CSS Tricks của anh ấy .

Đây là một screencast của anh ấy cũng như nói về cách tạo khuôn mặt biểu tượng phông chữ của riêng bạn.

@Tama, bạn có thể muốn kiểm tra câu trả lời này: Sử dụng biểu tượng Font Awesome làm đạn

Về cơ bản, bạn có thể thực hiện việc này bằng cách chỉ sử dụng CSS mà không cần đánh dấu thêm như được đề xuất bởi FontAwgie và các câu trả lời khác tại đây.

Nói cách khác, bạn có thể thực hiện những gì bạn cần bằng cách sử dụng cùng một đánh dấu cơ bản mà bạn đã đề cập trong bài đăng đầu tiên của mình:

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

Cảm ơn.

Giải pháp của tôi sử dụng tiêu chuẩn <ul>và <i>bên trong<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 TẠI ĐÂY

Trong Font Awesome 5 có thể được thực hiện bằng CSS thuần như trong một số câu trả lời ở trên với một số sửa đổi.

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

Nếu không có trọng lượng phông chữ chính xác, nó sẽ chỉ hiển thị một hình vuông trống.

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