web-dev-qa-db-ja.com

html selectでBootstrap 3グリフィコンを使用する方法

Bootstrap 3つのグリフィコンのサブセットをユーザーがUIで選択できるようにする必要があります。

私はこれを試しました：

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

ただし、取得できるのは空白行のみです。ヘルプや代替案を歓迎します。

twitter-bootstraptwitter-bootstrap-3html-selectglyphicons
18
JohnC

標準のHTML選択でHTMLコンテンツが表示されるとは思わない。チェックアウトすることをお勧めしますBootstrap select： http://silviomoreto.github.io/bootstrap-select/

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

19
Zim

私の知る限り、ネイティブ選択でこれを達成する唯一の方法は、フォントのUnicode表現を使用することです。グリフィコンフォントを選択に適用する必要があるため、他のフォントと混合することはできません。ただし、グリフィコンには通常の文字が含まれているため、テキストを追加できます。残念ながら、個々のオプションにフォントを設定することは不可能なようです。

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

23
Someone

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

グリフィコンを文字列の最初の文字として使用している場合は、html charを使用して（ https://glyphicons.bootstrapcheatsheets.com/ を参照）、フォントを最初の文字に適用できます要素：

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