Phong cách danh sách li tùy chỉnh với biểu tượng phông chữ tuyệt vời

Tôi tự hỏi liệu có thể sử dụng các lớp phông chữ tuyệt vời (hoặc bất kỳ phông chữ mang tính biểu tượng nào khác) để tạo <li>kiểu kiểu danh sách tùy chỉnh không?

Tôi hiện đang sử dụng jQuery để làm điều này, tức là:

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

Tuy nhiên, điều này không đúng kiểu khi <li>văn bản kết thúc trên trang vì nó coi biểu tượng là một phần của văn bản, không phải là chỉ báo dấu đầu dòng thực tế.

Bất cứ lời khuyên?

Các Chức năng CSS và đếm Mô-đun Level 3 giới thiệu các ::markerphần tử giả. Từ những gì tôi đã hiểu nó sẽ cho phép một điều như vậy. Thật không may, dường như không có trình duyệt hỗ trợ nó .

Những gì bạn có thể làm là thêm một số phần đệm cho cha mẹ ulvà kéo biểu tượng vào phần đệm đó:

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>

Điều chỉnh phần đệm / cỡ chữ / vv theo ý thích của bạn và đó là tùy chọn. Đây là câu đố thông thường: http://jsfiddle.net/joplomaceso/a8GxZ/

=====

Điều này hoạt động với bất kỳ loại phông chữ biểu tượng. Tuy nhiên, FontAwgie cung cấp cách thức riêng để giải quyết 'vấn đề' này. Kiểm tra câu trả lời của Darrrrren dưới đây để biết thêm chi tiết.

Theo Tài liệu Tuyệt vời về Phông chữ :

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

Hoặc, sử dụng 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

Tôi muốn cung cấp một giải pháp thay thế, dễ dàng hơn dành riêng cho FontAwgie. Nếu bạn đang sử dụng một phông chữ mang tính biểu tượng khác, câu trả lời của JOPLOmaces vẫn hoàn toàn tốt để sử dụng.

FontAwgie hiện xử lý các kiểu danh sách bên trong với các lớp CSS .

Đây là ví dụ chính thức:

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

Tôi muốn thêm vào câu trả lời của JOPLOmaces. Giải pháp của anh ấy là yêu thích của tôi, nhưng tôi luôn gặp vấn đề với thụt đầu dòng khi li có nhiều hơn một dòng. Thật khó để tìm ra vết lõm chính xác với lề, v.v. Nhưng điều này có thể chỉ liên quan đến tôi.

Đối với tôi định vị tuyệt đối của :beforephần tử giả hoạt động tốt nhất. Tôi đặt padding-lefttrên ul, vị trí âm còn lại trên :beforephần tử, giống như của ul padding-left. Để có được khoảng cách của nội dung từ :beforephần tử đúng, tôi chỉ cần đặt padding-leftli. Tất nhiên các li phải có vị trí tương đối. Ví dụ

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

Hy vọng điều này là rõ ràng và có một số giá trị cho người khác hơn tôi.

Tôi đã làm nó như thế này:

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

Hoặc bạn có thể thử điều này nếu bạn muốn thay đổi màu sắc:

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

Tôi đã làm hai điều lấy cảm hứng từ bình luận @OscarJovanny, với một số hack.

Bước 1:

• Tải tập tin biểu tượng dưới dạng svg từ đây , vì tôi chỉ cần biểu tượng này từ phông chữ tuyệt vời

Bước 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>

Các kết quả