Sử dụng FontAwesome hoặc Glyphicons với css: trước

Question

Có cách nào để nhúng HTML vào phần tử css content: khi sử dụng một phần tử giả :before không?

Tôi muốn sử dụng một phông chữ tuyệt vời (hoặc Glyphicon) trong một trường hợp sử dụng như thế này:

h1:before { 
     content: "X"; 
     padding-right: 10px; 
     padding-left: 10px; 
     color: @orangeLight; 
    } 

đâu X là một cái gì đó giống như <i class="icon-cut"></i>.

Tôi có thể, tất nhiên làm điều này theo cách thủ công trong HTML, nhưng tôi thực sự muốn sử dụng :before trong trường hợp này.

Tương tự, có cách nào để sử dụng <i> làm dấu đầu dòng không? Công trình này hoạt động nhưng không hoạt động chính xác cho các mục bullet nhiều dòng:

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

Answer 1

Điều bạn mô tả thực sự là những gì FontAwesome đang làm. Họ áp dụng phông chữ FontAwesome cho thành phần giả ::before của bất kỳ phần tử nào có lớp bắt đầu bằng "biểu tượng-".

[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
} 

Sau đó, họ sử dụng phần tử giả ::before để đặt biểu tượng trong phần tử với lớp. Tôi chỉ đi đến http://fortawesome.github.com/Font-Awesome/ và kiểm tra mã để tìm thấy điều này:

.icon-cut:before { 
    content: "\f0c4"; 
} 

Vì vậy, nếu bạn đang tìm kiếm để thêm vào biểu tượng một lần nữa, bạn có thể sử dụng các yếu tố ::after để đạt được điều này. Hoặc đối với phần thứ hai của câu hỏi, bạn có thể sử dụng phần tử giả ::after để chèn ký tự dấu đầu dòng giống như một mục danh sách. Sau đó, sử dụng vị trí tuyệt đối để đặt nó ở bên trái, hoặc một cái gì đó tương tự.

i:after{ content: '\2022';} 

Answer 2

Trong trường hợp các mục danh sách của bạn có một chút CSS bạn có thể sử dụng để đạt được hiệu quả mong muốn.

ul.icons li { 
    position: relative; 
    padding-left: -20px; // for example 
} 
ul.icons li i { 
    position: absolute; 
    left: 0; 
} 

Tôi đã thử nghiệm điều này trong Safari trên OS X.

Answer 3

<ul class="icons-ul"> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
</ul> 

Tất cả các phông chữ tuyệt vời biểu tượng đi kèm mặc định với Bootstrap.

Answer 4

Đây là cách dễ nhất để làm những gì bạn đang cố gắng làm:

http://jsfiddle.net/ZEDHT/

<style> 
ul { 
    list-style-type: none; 
} 
</style> 

<ul class="icons"> 
<li><i class="fa fa-bomb"></i> Lists</li> 
<li><i class="fa fa-bomb"></i> Buttons</li> 
<li><i class="fa fa-bomb"></i> Button groups</li> 
<li><i class="fa fa-bomb"></i> Navigation</li> 
<li><i class="fa fa-bomb"></i> Prepended form inputs</li> 
</ul> 

Answer 5

Re: sử dụng biểu tượng trong :before - Font gần đây công trình tuyệt vời bao gồm .fa-icon() mixin cho Sass và LESS . Điều này sẽ tự động bao gồm font-family cũng như một số chỉnh sửa hiển thị (ví dụ: -webkit-font-smoothing). Do đó, bạn có thể làm, ví dụ:

// Add "?" icon to header. 
h1:before { 
    .fa-icon(); 
    content: "\f059"; 
} 

Answer 6

Cách tiếp cận này nên tránh. Giá trị mặc định cho vertical-align là baseline. Thay đổi họ phông chữ của chỉ phần tử giả sẽ dẫn đến các phần tử có phông chữ khác nhau. Các phông chữ khác nhau có thể có các chỉ số phông chữ khác nhau và các đường cơ sở khác nhau. Để các đường cơ sở khác nhau căn chỉnh, chiều cao tổng thể của phần tử sẽ phải tăng lên. See this effect in action.

Tốt hơn nên có một phần tử trên mỗi biểu tượng phông chữ.

Answer 7

@keithwyland câu trả lời là rất tốt. Dưới đây là một mixin SCSS:

@mixin font-awesome($content){ 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
    content: $content; 
} 

Cách sử dụng:

@include font-awesome("\f054");