Иконка в опции - Bootstrap + Font-awsome

Я пытаюсь вставить значок в опцию из списка выбора. Используя значки, напоминающие шрифты, значок не отображается.

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

Могу ли я использовать шрифт-awesome для достижения того, что мне нужно? Или мне нужно отменить использование шрифта - удивительный и сделать ручной CSS-фон для каждой опции?

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

Ответы

Ответ 1

Вы можете использовать FontAwesome в качестве шрифта для юникода и вставлять свои значки в кросс-платформенный способ. Вам просто нужно найти значение юникода для каждого значка

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

Ответ 2

Вы можете немного обмануть и поставить класс на опцию:

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

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

Ответ 3

Очевидно, Select2 (http://ivaynberg.github.io/select2/) является решением для размещения значков в тегах параметров. Однако, возможно, из-за моего отсутствия знаний, я просто не мог заставить его работать. В итоге я прибегал к использованию списков (я также использовал 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>

Однако существует недостаток, поэтому идентификатор списка должен быть уникальным. Итак, если у меня было 5 разных списков на одной странице, вы должны объявить (?) Все из них в javascript, делая коды короткими.

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

Надеюсь, что поможет пролить свет.

Ответ 4

Используйте плагин, например select2

Здесь работает 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>

Ответ 5

Решение для значков, работающих в Chrome, было предоставлено по аналогичному вопросу.

Пример JSFiddle

Используемый код:

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