如何在HTML选择器中使用Bootstrap 3的图标？

Question

我需要让用户在我的界面中选择 Bootstrap 3 的一部分 glyphicon。

我尝试了这个方法：

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

然而，我得到的都是空白行。欢迎提供任何帮助或替代建议。

- JohnC

Answer 1

据我所知，在原生下拉框中实现这一点的唯一方法是使用字体的Unicode表示。您必须将glyphicon字体应用于下拉列表中，因此无法与其他字体混合使用。但是，glyphicons包括常规字符，因此您可以添加文本。不幸的是，似乎无法为单个选项设置字体。

<select class="form-control glyphicon">
    <option value="">&#x2212; &#x2212; &#x2212; Hello</option>
    <option value="glyphicon-list-alt">&#xe032; Text</option>
</select>

以下是各个图标及其unicode编码的列表：

http://glyphicons.bootstrapcheatsheets.com/

- Mantriur

---

注意：这个技巧也适用于 font-awesome 的 glyphicons，使用类 fa 而不是 glyphicon。您可以在这里获取图标的 unicode 列表：http://fontawesome.io/cheatsheet/。 - Jonathan Parent Lévesque

这在 BS 3.3.7 中部分工作。例如，✏ 显示出来了，但  或  没有显示出来。 - Roland

在<select>上应用glyphicon会导致文本显示不同的字体。我在<option>标签中同时拥有图标和字体，但没有图标显示出来。 - Roland

如果您选择使用font-awesome，请记住，仅在select中使用fa类将使用标准图标大小。如果您喜欢更大的图标，请在select类中使用“fa fa-lg”。 - apereira

这应该是被接受的答案。它充分回答了问题，而不需要包含额外的库或插件。我投了赞成票。 - user4979686

无法工作，使用AngularJS时出现无效模板错误。 - GOPAL SHARMA

Answer 2

我认为标准的HTML选择框不会显示HTML内容。我建议尝试查看Bootstrap选择框：http://silviomoreto.github.io/bootstrap-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>

这是一个演示：https://www.codeply.com/go/l6ClKGBmLS

- Zim

---

谢谢，第一部分回答了我的问题，从技术上讲，它是BS3中的一个字体，因此我认为我将追求这个方面，以查看是否可以使用它作为字体来使常规选择器正常工作。您的解决方案在技术上确实显示了下拉列表中的图标，但在编辑部分却没有，并且我担心它不会完全支持BS3，因为该控件似乎早于bs3，而且他们在文档中也没有提到它。 - JohnC

不客气。我也没有看到关于Bootstrap Select的BS 3的任何提及..希望他们会更新它..这是一个很棒的插件。 - Carol Skelly

bootply.com似乎无法访问。有没有办法将插入符替换为我的字形图标？ - Rubyrider

Answer 3

我最终使用了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>

我正在使用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>

我的控制器中:

$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;
};

- JohnC

---

这对我解决了 Angular 版本的问题。非常感谢。 :) - Prime_Coder

同样，这种方法也适用于Ember/Handlebars。 - B. Bulpett

Answer 4

如果您将glyphicon作为字符串的第一个字符使用，您可以使用html char（请参阅https://glyphicons.bootstrapcheatsheets.com/），然后将字体应用于元素的第一个字符：

    option::first-letter{
        font-family: Glyphicons Halflings;
    }

- GGTT