Biểu tượng trong tùy chọn - Bootstrap + Font-awsome

Question

Tôi đang cố nhúng biểu tượng vào một tùy chọn từ danh sách chọn. Sử dụng các biểu tượng phông chữ tuyệt vời, không có biểu tượng nào đang được hiển thị.

<select> 
    <option><i class="icon-camera-retro"></i> Doesn't work in option!</option> 
</select> 

Tôi có thể sử dụng phông chữ tuyệt vời để đạt được những gì tôi cần không? Hoặc tôi có phải loại bỏ bằng cách sử dụng font-awesome và làm một nền CSS thủ công cho mỗi tùy chọn?

JSFiddle: http://jsfiddle.net/mmXh2/1/

Answer 1

Bạn có thể ăn gian một chút và đưa lớp vào tùy chọn:

http://jsfiddle.net/mmXh2/2/

<option class="icon-camera-retro"> Doesn't work in option!</option> 

Answer 2

Rõ ràng Select2 (http://ivaynberg.github.io/select2/) là một giải pháp để đưa các biểu tượng trong lựa chọn thẻ. Tuy nhiên, có lẽ do tôi thiếu kiến ​​thức, tôi không thể làm cho nó hoạt động được. Cuối cùng tôi đành để sử dụng danh sách (Tôi cũng đã sử dụng Bootstrap)

<a class="btn dropdown-toggle category" data-toggle="dropdown" href="#">All Categories <span class="caret pull-right"></span></a> 
<ul id="category" class="dropdown-menu"> 
    <li><a href="#"><i class="icon"></i> Category A</a></li> 
    <li><a href="#"><i class="icon"></i> Category B</a></li> 
    .. 
</ul> 

Có một nhược điểm tuy nhiên, id của danh sách có phải là duy nhất. Vì vậy, nếu như tôi bạn có 5 danh sách khác nhau trong một trang, bạn phải khai báo (?) Tất cả chúng trong javascript làm cho các mã chunky.

$(function(){ 
    $("#category li a").click(function(){ 
    $(".category").val($(this).text()); 
    }); 
}); 

Hy vọng rằng sẽ giúp giảm bớt ánh sáng.

Answer 3

Bạn có thể sử dụng FontAwesome làm phông chữ unicode và chèn biểu tượng của mình theo cách đa nền tảng. Bạn chỉ cần nhìn lên giá trị unicode cho mỗi biểu tượng

<select style="font-family: 'FontAwesome', Helvetica;"> 
    <option>&#xf083; Now I show the pretty camera!</option> 
</select> 

Answer 4

Sử dụng một plugin như select2

Dưới đây là một công tác jsfiddle

<select id="icon_select" style="width: 150px;"><option value="fa-glass">&amp;#xf000; fa-glass</option> 
    <option value="fa-music">&amp;#xf001; fa-music</option> 
</select> 

Answer 5

Một giải pháp cho các biểu tượng làm việc trong Chrome đã được trao on a similar question .

JSFiddle Example

Mã sử ​​dụng:

function format(icon) { 
    var originalOption = icon.element; 
    return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text; 
} 
$('.wpmse_select2').select2({ 
    width: "100%", 
    formatResult: format 
});