如何在html選擇中使用Bootstrap 3圖形

Question

我需要製作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

我不認爲標準的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 2

我結束了使用引導3下拉按鈕，我在這裏發佈我的解決方案的情況下，它可以幫助別人的未來。將引導程序3列表添加到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; 
}; 

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> 

這裏是他們統一的圖標的列表：

http://glyphicons.bootstrapcheatsheets.com/