我正在尝试将图标嵌入选择列表中的选项。使用字体很棒的图标时,没有显示图标。
<select>
<option><i class="icon-camera-retro"></i> Doesn't work in option!</option>
</select>
我可以使用font-awesome来实现我所需要的吗?或者我必须放弃使用font-awesome并为每个选项做一个手动CSS背景?
JSF中间文件:http://jsfiddle.net/mmXh2/1/
我正在尝试将图标嵌入选择列表中的选项。使用字体很棒的图标时,没有显示图标。
<select>
<option><i class="icon-camera-retro"></i> Doesn't work in option!</option>
</select>
我可以使用font-awesome来实现我所需要的吗?或者我必须放弃使用font-awesome并为每个选项做一个手动CSS背景?
JSF中间文件:http://jsfiddle.net/mmXh2/1/
5条答案
按热度按时间rseugnpd1#
您可以使用FontAwesome作为unicode字体,并以跨平台的方式插入图标。
lqfhib0f2#
你可以稍微作弊一下,把类放在选项上:
http://jsfiddle.net/mmXh2/2/
gwbalxhn3#
显然Select2(http://ivaynberg.github.io/select2/)是一个把图标放在选项标签中的解决方案。然而,也许是由于我缺乏知识,我就是不能让它工作。最后我求助于使用列表(我也在使用Bootstrap)
不过也有一个缺点,列表的ID必须是唯一的。所以,如果像我一样,你在一个页面中有5个不同的列表,你必须在JavaScript中声明(?)所有这些列表,使代码变得笨重。
希望能有所帮助。
vc9ivgsu4#
使用select2之类的插件
这是一个工作正常的jsfiddle
h22fl7wq5#
一个图标在Chrome中工作的解决方案已经给出on a similar question。
JSFiddle Example
使用的代码: