Question

我正在尝试在选择列表中的选项中嵌入一个图标。使用font-awesome图标，不显示任何图标。

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

Answer 1

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

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

Answer 2

你可以作弊，把课程放在选项上：

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

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

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

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

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

希望有所帮助。

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

Answer 5

Chrome中使用的图标解决方案已on a similar question。

JSFiddle Example

使用的代码：

id

选项中的图标 - Bootstrap + Font-awesome

5 个答案: