选项中的图标- Bootstrap +字体-awsome

bqf10yzr  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(5)|浏览(165)

我正在尝试将图标嵌入选择列表中的选项。使用字体很棒的图标时,没有显示图标。

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

rseugnpd

rseugnpd1#

您可以使用FontAwesome作为unicode字体,并以跨平台的方式插入图标。

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

lqfhib0f2#

你可以稍微作弊一下,把类放在选项上:
http://jsfiddle.net/mmXh2/2/

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

gwbalxhn3#

显然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());
  });
});

希望能有所帮助。

vc9ivgsu

vc9ivgsu4#

使用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>
h22fl7wq

h22fl7wq5#

一个图标在Chrome中工作的解决方案已经给出on a similar question
JSFiddle Example
使用的代码:

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

相关问题