18

我正在尝试在选择列表中的选项中嵌入图标。使用字体真棒图标，没有图标被显示。

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

我可以使用 font-awesome 来实现我所需要的吗？或者我是否必须使用 font-awesome 废弃并为每个选项做一个手动 CSS 背景？

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

4

5 回答 5

19

您可以使用 FontAwesome 作为 unicode 字体，并以跨平台的方式插入您的图标。您只需要查找每个图标的 unicode 值

<select style="font-family: 'FontAwesome', Helvetica;">
    <option>&#xf083; Now I show the pretty camera!</option>
</select>
于 2013-10-11T11:51:55.723 回答
5

您可以稍微作弊，然后将课程放在选项上：

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

<option class="icon-camera-retro"> Doesn't work in option!</option>
于 2013-05-13T15:22:04.407 回答
2

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

但是有一个缺点，列表的 id 必须是唯一的。因此，如果像我一样，您在一页中有 5 个不同的列表，您必须在 javascript 中声明（？）所有这些列表，从而使代码变粗。

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

希望能有所帮助。

于 2013-05-27T18:51:36.910 回答
0

使用像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>
于 2014-02-12T03:40:42.993 回答
0

在类似的问题上已经给出了在 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
});
于 2016-05-28T01:36:35.547 回答