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>
しかし、私が得るすべては空白行である。 どんなヘルプや代替案でも構いませんので、よろしくお願いします。
私の知る限り、ネイティブセレクトでこれを実現する唯一の方法は、フォントのユニコード表現を使用することでしょう。グリフィコンフォントをセレクトに適用しなければならないので、他のフォントと混在させることはできません。ただし、グリフィコンには通常の文字が含まれているので、テキストを追加することは可能です。残念ながら、個々のオプションにフォントを設定することはできないようです。
<select class="form-control glyphicon">
<option value="">− − − Hello</option>
<option value="glyphicon-list-alt"> Text</option>
</select>
以下は、アイコンの一覧とユニコードです。
標準のHTMLセレクトでは、HTMLコンテンツは表示されないと思います。Bootstrapのselectをチェックすることをお勧めします: 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>
結局、bootstrap 3 のドロップダウンボタンを使うことにしました。 ulのクラスにbootstrap 3のlist-inlineを追加すると、きれいにコンパクトに表示されるようになります。
<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;
};