Html 选项中的图标 - Bootstrap + Font-awsome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16525513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Icon in option - Bootstrap + Font-awsome
提问by Monokh
I am trying to embed an icon in an option from a select list. Using font-awesome icons, no icon is being displayed.
我正在尝试在选择列表中的选项中嵌入一个图标。使用字体很棒的图标，没有图标被显示。
<select>
<option><i class="icon-camera-retro"></i> Doesn't work in option!</option>
</select>
Can i use font-awesome to achieve what i need? Or do i have to scrap using font-awesome and do a manual CSS background for each option?
我可以使用 font-awesome 来实现我所需要的吗？或者我是否必须放弃使用 font-awesome 并为每个选项手动设置 CSS 背景？
JSFiddle: http://jsfiddle.net/mmXh2/1/
JSFiddle：http: //jsfiddle.net/mmXh2/1/
回答by Sanojian
You can use FontAwesome as a unicode font and insert your icons in a cross-platform way. You just need to look up the unicode value for each icon
您可以使用 FontAwesome 作为 Unicode 字体并以跨平台方式插入您的图标。您只需要查找每个图标的 unicode 值
<select style="font-family: 'FontAwesome', Helvetica;">
<option> Now I show the pretty camera!</option>
</select>
回答by Billy Moat
You can cheat a little bit and put the class on the option:
你可以稍微作弊，把课程放在选项上：
<option class="icon-camera-retro"> Doesn't work in option!</option>
回答by Jennift
Apparently Select2 (http://ivaynberg.github.io/select2/) is a solution to putting icons in option tags. However, perhaps due to my lack of knowledge, I just couldn't make it work. In the end I resorted to using lists (I was also using Bootstrap)
显然 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>
There is a drawback though, the id of the list has to be unique. So, if like me you had 5 different lists in one page, you have to declare (?) all of them in javascript making the codes chunky.
但是有一个缺点，列表的 id 必须是唯一的。因此，如果像我一样在一页中有 5 个不同的列表，则必须在 javascript 中声明 (?) 所有这些列表，从而使代码变得笨拙。
$(function(){
$("#category li a").click(function(){
$(".category").val($(this).text());
});
});
Hope that help shed some light.
希望能有所帮助。
回答by Jeremy Lynch
回答by Jayden Lawson
A solution for icons working in Chrome has been given on a similar question.
在一个类似的问题上已经给出了在 Chrome 中工作的图标的解决方案。
Code used:
使用的代码：
function format(icon) {
var originalOption = icon.element;
return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text;
}
$('.wpmse_select2').select2({
width: "100%",
formatResult: format
});
