html selectでブートストラップ3グリフコンを使用する方法

Question

ユーザが私の中で選択できるブートストラップ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コンテンツが表示されるとは思われません。ブートストラップをチェックアウトすることをお勧めします。http://silviomoreto.github.io/bootstrap-select/

これは、アイコンやその他のHTMLマークアップを選択項目に表示するためのいくつかのオプションがあります。私は、ブートストラップ3ドロップダウンボタンを使用して終了https://www.codeply.com/go/l6ClKGBmLS

Answer 2

が、私はそれが将来的に誰かを助けた場合にここに私の解決策を掲載しています：ここで

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

はデモです。 ulのクラスにブートストラップ3のlist-inlineを追加すると、コンパクトな形式で表示されます。

<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

私の知る限りでは実現する唯一の方法を私は、これは私が使用した実際のコードであるAngular.jsを使用してい

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

これは、ネイティブの選択では、フォントのユニコード表現を使用することです。 glyphiconフォントをselectに適用しなければならないので、他のフォントと混在させることはできません。ただし、グリフコンには通常の文字が含まれているため、テキストを追加できます。残念ながら、個々のオプションのフォントを設定することは可能ではないようです。

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