如何在html选择中使用Bootstrap 3 glyphicon？

如何在html选择中使用Bootstrap 3 glyphicon？
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用

回答 (2)
关注 (0)
查看 (74)

我需要制作Bootstrap 3 glyphicons的一个子集，可供用户在我的用户界面中进行选择。

我试过这个：

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

提问于 2018-03-202018-03-20 02:03:18

用户回答回答于 2018-03-202018-03-20 10:24:56

我不认为标准的HTML选择会显示HTML内容。

它有几个选项用于在选择中显示图标或其他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>

赞0 收藏0 评论0

我不认为标准的HTML选择会显示HTML内容。它有几个选项用于在选择中显示图标或其他HTML标记。 <select id="mySelect" data-show-icon="true"> <option data-content="<i class='glyphicon...

用户回答回答于 2018-03-202018-03-20 12:01:52

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

赞0 收藏0 评论0

<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Select icon <spa...