Как использовать глификон Bootstrap 3 в выборе html

Мне нужно сделать подмножество глификонов 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>

Однако все, что я получаю, это пустые строки. Любая помощь или альтернативные предложения приветствуются.


twitter-bootstrap twitter-bootstrap-3 html-select glyphicons
person JohnC    schedule 08.10.2013    source источник

Ответы (4)


arrow_upward
21
arrow_downward

Я не думаю, что стандартный выбор 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

person Zim    schedule 08.10.2013
comment
Спасибо, первая часть отвечает на мой вопрос, технически это шрифт в BS3, поэтому я думаю, что продолжу изучение этого аспекта, чтобы посмотреть, смогу ли я получить обычный выбор, работающий с ним как со шрифтом. Технически ваше решение показывает значок в раскрывающемся списке выбора, которого нет в части редактирования, и я беспокоюсь, что оно не будет полностью поддерживать BS3, поскольку кажется, что контроль предшествует дате bs3, и они не упоминают в своих документы об этом. - person JohnC; 09.10.2013
comment
Пожалуйста. Я также не видел упоминаний о BS 3 для Bootstrap Select. Надеюсь, они его обновят. Это отличный плагин. - person Zim; 09.10.2013
comment
bootply.com кажется недоступным. Можно ли как-нибудь заменить каретку своим значком глифа? - person Rubyrider; 01.07.2015

arrow_upward
23
arrow_downward

Насколько мне известно, единственный способ добиться этого в собственном выборе - использовать юникодные представления шрифта. Вам нужно будет применить шрифт 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/

person Mantriur    schedule 14.11.2014
comment
Примечание. Этот трюк также работает с красивыми глификонами <select class="form-control fa"><option value="">&#xf1ab;&nbsp; demo</option></select>. Вместо использования класса glyphicon используйте класс fa. Вы можете получить список юникода для иконок здесь: fontawesome.io/cheatsheet - person Jonathan Parent Lévesque; 18.05.2017
comment
Это частично работало с BS 3.3.7. Например, отображается &#x270f;, но не &#xe023; или &#xe013;. - person Roland; 17.11.2017
comment
Применение glyphicon к <select> привело к тому, что текст отображался другим шрифтом. У меня есть оба, значок + шрифт в теге <option>. И значок не появляется. - person Roland; 17.11.2017
comment
Если вы выберете font-awsome, помните, что просто используя класс fa в select, он будет использовать стандартный размер значка. если вы предпочитаете более крупный значок, используйте «fa fa-lg» в классе выбора - person apereira; 08.02.2018
comment
Это должен быть принятый ответ. Он адекватно отвечает на вопрос без включения дополнительных библиотек или плагинов. Примите мой голос. - person ; 08.03.2018
comment
Не работает, выдает неверную ошибку шаблона с AngulaJS - person Gopaal Sharrma; 17.08.2018

arrow_upward
20
arrow_downward

В итоге я использовал кнопку раскрывающегося списка 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;
};
person JohnC    schedule 09.10.2013
comment
Это помогло мне с угловой версией. Большое спасибо. :) - person Prime_Coder; 29.11.2016
comment
Точно так же этот подход работает и с Ember/Handlebars. - person B. Bulpett; 29.05.2017

arrow_upward
1
arrow_downward

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

    option::first-letter{
        font-family: Glyphicons Halflings;
    }
person GGTT    schedule 11.12.2018