Как использовать глиф в Bootstrap 3 в html select

Ответ 1

Я не думаю, что стандартный выбор HTML будет отображать содержимое HTML. Я бы посоветовал проверить выбор Bootstrap: http://silviomoreto.github.io/bootstrap-select/

Он имеет несколько вариантов отображения значков или другой разметки HTML в select.

<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

Ответ 2

В итоге я использовал кнопку выпадающего списка bootstrap 3, я отправляю свое решение здесь, если это поможет кому-то в будущем. Добавление строкового списка bootstrap 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;
};

Ответ 3

Насколько я знаю, единственным способом добиться этого в нативном выборе было бы использование юникодовых представлений шрифта. Вам придется применить шрифт глификона к выбору и, как таковой, не может смешивать его с другими шрифтами. Однако глификоны включают обычные символы, поэтому вы можете добавлять текст. К сожалению, установка шрифта для отдельных параметров не представляется возможной.

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

Ответ 4

Если вы используете глификон в качестве первого символа строки, вы можете использовать html char (см. Https://glyphicons.bootstrapcheatsheets.com/), а затем применить шрифт к первому символу элемента:

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