twitter-bootstrap 如何在 html 选择中使用 Bootstrap 3 glyphicon
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19259518/
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
How to use a Bootstrap 3 glyphicon in an html select
提问by JohnC
I need to make a subset of the Bootstrap 3 glyphicons selectable in my ui by the user.
我需要让用户可以在我的 ui 中选择 Bootstrap 3 glyphicons 的一个子集。
I tried this:
我试过这个：
<select class="form-control">
<option><span class="glyphicon glyphicon-cutlery"></span></option>
<option><span class="glyphicon glyphicon-eye-open"></span></option>
<option><span class="glyphicon glyphicon-heart-empty"></span></option>
<option><span class="glyphicon glyphicon-leaf"></span></option>
<option><span class="glyphicon glyphicon-music"></span></option>
<option><span class="glyphicon glyphicon-send"></span></option>
<option><span class="glyphicon glyphicon-star"></span></option>
</select>
However all I get are blank lines. Any help or alternative suggestions appreciated.
但是我得到的只是空行。任何帮助或替代建议表示赞赏。
回答by Someone
To my knowledge the only way to achieve this in a native select would be to use the unicode representations of the font. You'll have to apply the glyphicon font to the select and as such can't mix it with other fonts. However, glyphicons include regular characters, so you can add text. Unfortunately setting the font for individual options doesn't seem to be possible.
据我所知，在本机选择中实现这一点的唯一方法是使用字体的 unicode 表示。您必须将 glyphicon 字体应用于选择，因此不能将其与其他字体混合。但是，字形包括常规字符，因此您可以添加文本。不幸的是，为单个选项设置字体似乎是不可能的。
<select class="form-control glyphicon">
<option value="">− − − Hello</option>
<option value="glyphicon-list-alt"> Text</option>
</select>
Here's a list of the icons with their unicode:
这是带有 unicode 的图标列表：
回答by Zim
I don't think the standard HTML select will display HTML content. I'd suggest checking out Bootstrap select: http://silviomoreto.github.io/bootstrap-select/
我认为标准的 HTML 选择不会显示 HTML 内容。我建议检查 Bootstrap 选择：http: //silviomoreto.github.io/bootstrap-select/
It has several options for displaying icons or other HTML markup in the select.
它有几个选项用于在选择中显示图标或其他 HTML 标记。
<select id="mySelect" data-show-icon="true">
<option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option>
<option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option>
<option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option>
</select>
Here is a demo: https://www.codeply.com/go/l6ClKGBmLS
这是一个演示：https: //www.codeply.com/go/l6ClKGBmLS
回答by JohnC
I ended up using the bootstrap 3 dropdown button, I'm posting my solution here in case it helps someone in future. Adding the bootstrap 3 list-inline to the class for the ul causes it to display in a nicely compact format as well.
我最终使用了 bootstrap 3 下拉按钮，我在这里发布了我的解决方案，以防将来对某人有所帮助。将 bootstrap 3 list-inline 添加到 ul 的类会使其以非常紧凑的格式显示。
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Select icon <span class="caret"></span>
</button>
<ul class="dropdown-menu list-inline" role="menu">
<li><span class="glyphicon glyphicon-cutlery"></span></li>
<li><span class="glyphicon glyphicon-fire"></span></li>
<li><span class="glyphicon glyphicon-glass"></span></li>
<li><span class="glyphicon glyphicon-heart"></span></li>
</ul>
</div>
I'm using Angular.js so this is the actual code I used:
我正在使用 Angular.js 所以这是我使用的实际代码：
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Avatar <span class="caret"></span>
</button>
<ul class="dropdown-menu list-inline" role="menu">
<li ng-repeat="avatar in avatars" ng-click="avatarSelected(avatar)">
<span ng-class="getAvatar(avatar)"></span>
</li>
</ul>
</div>
And in my controller:
在我的控制器中：
$scope.avatars=['cutlery','eye-open','flag','flash','glass','fire','hand-right','heart','heart-empty','leaf','music','send','star','star-empty','tint','tower','tree-conifer','tree-deciduous','usd','user','wrench','time','road','cloud'];
$scope.getAvatar=function(avatar){
return 'glyphicon glyphicon-'+avatar;
};
回答by GGTT
If you are using the glyphicon as the first character of the string, you can use the html char (see https://glyphicons.bootstrapcheatsheets.com/) and then apply the font to the first character of the element:
如果您使用 glyphicon 作为字符串的第一个字符，则可以使用 html 字符（请参阅https://glyphicons.bootstrapcheatsheets.com/），然后将字体应用于元素的第一个字符：
option::first-letter{
font-family: Glyphicons Halflings;
}
