Sử dụng biểu tượng Phông chữ Tuyệt vời cho các điểm dấu đầu dòng, với một phần tử danh sách duy nhất

Question

Chúng tôi muốn có thể sử dụng biểu tượng Phông chữ Tuyệt đẹp (http://fortawesome.github.com/Font-Awesome/) làm dấu đầu dòng cho các danh sách không có thứ tự trong CMS.

Trình chỉnh sửa văn bản trên CMS chỉ xuất ra HTML thô để không thể thêm các thành phần/lớp bổ sung.

Điều này có nghĩa hiển thị các biểu tượng khi đánh dấu lên 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 tạo ảnh vui nhộn đòi hỏi một thuộc tính font-family khác nhau, trong đó sẽ đòi hỏi 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 thêm phần tử vào đầu mỗi mục danh sách bằng cách sử dụng một cái gì đó như jQuery?

Tôi nhận ra rằng chúng tôi có thể sử dụng hình ảnh nền phía sau, nhưng thật tuyệt vời khi sử dụng Phông chữ tuyệt vời nếu có thể.

Answer 1

Giải pháp:

http://jsfiddle.net/VR2hP/

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

Dưới đây là một blog post điều này giải thích kỹ thuật này trong chiều sâu.

Answer 2

Có ví dụ về cách sử dụng Phông chữ tuyệt vời cùng với danh sách không có thứ tự trên examples page.

<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ư vậy:

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

Ngoài ra kiểm tra hay thay đổi Chris Coyier's post on icon fonts trên trang web của mình CSS Tricks.

Here's a screencast bởi anh ấy cũng nói về cách tạo phông chữ biểu tượng của riêng bạn.

Answer 3

Tôi đang sử dụng http://icomoon.io/ Nó cung cấp cho bạn tùy chọn chỉ tải các biểu tượng phông chữ bạn cần. Chọn các biểu tượng bạn muốn, sử dụng phím để biểu tượng và tải xuống một phông chữ nhỏ thay vì toàn bộ phông chữ tuyệt vời (vẫn tuyệt vời).

Đây là thử nghiệm của tôi: http://jsfiddle.net/Annett/ZB7TK/

Answer 4

@Tama, bạn có thể muốn kiểm tra câu trả lời này: Using Font Awesome icons as bullets

Về cơ bản, bạn có thể thực hiện điều này bằng cách sử dụng chỉ CSS mà không cần đánh dấu thêm theo đề nghị của FontAwesome và các câu trả lời khác ở đây.

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

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

Cảm ơn.

Answer 5

Phông chữ mới (phiên bản 4.0.3) làm cho việc này thực sự dễ thực hiện.Chúng tôi chỉ đơn giản là sử dụng các loại sau đây:

<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 này (mới) url: http://fontawesome.io/examples/#list

Answer 6

Tôi muốn xây dựng dựa trên một số các câu trả lời trên và cho nơi khác và đề nghị sử dụng tuyệt đối vị 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 phương thức xử lý 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 HERE

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

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