如何在 html 选择中使用 Bootstrap 3 字形图标

Question

我需要让用户在我的 ui 中选择 Bootstrap 3 字形图标的子集。

我试过了：

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

但是我得到的只是空行。任何帮助或替代建议表示赞赏。

Answer 1

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

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

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

Answer 3

据我所知，在本机选择中实现此目的的唯一方法是使用字体的 unicode 表示。您必须将 glyphicon 字体应用于选择，因此不能将其与其他字体混合。但是，字形图标包含常规字符，因此您可以添加文本。不幸的是，似乎无法为单个选项设置字体。

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

Answer 4

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