How to use a Bootstrap 3 glyphicon in an html select

Question

I need to make a subset of the Bootstrap 3 glyphicons selectable in my ui by the user   I tried this    lt select class  form-control  gt     lt option gt  lt span class  glyphicon glyphicon-cutlery  gt  lt  span gt  lt  option gt     lt option gt  lt span class  glyphicon glyphicon-eye-open  gt  lt  span gt  lt  option gt      lt option gt  lt span class  glyphicon glyphicon-heart-empty  gt  lt  span gt  lt  option gt     lt option gt  lt span class  glyphicon glyphicon-leaf  gt  lt  span gt  lt  option gt     lt option gt  lt span class  glyphicon glyphicon-music  gt  lt  span gt  lt  option gt     lt option gt  lt span class  glyphicon glyphicon-send  gt  lt  span gt  lt  option gt     lt option gt  lt span class  glyphicon glyphicon-star  gt  lt  span gt  lt  option gt   lt  select gt    However all I get are blank lines   Any help or alternative suggestions appreciated

User · Answer

I ended up using the bootstrap 3 dropdown button, I'm posting my solution here in case it helps someone in future. Adding the bootstrap 3 list-inline to the class for the ul causes it to display in a nicely compact format as well.

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

I'm using Angular.js so this is the actual code I used:

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

And in my controller:

$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;
};

User · Answer

To my knowledge the only way to achieve this in a native select would be to use the unicode representations of the font  You ll have to apply the glyphicon font to the select and as such can t mix it with other fonts  However  glyphicons include regular characters  so you can add text  Unfortunately setting the font for individual options doesn t seem to be possible    lt select class  form-control glyphicon  gt       lt option value    gt  amp  x2212   amp  x2212   amp  x2212  Hello lt  option gt       lt option value  glyphicon-list-alt  gt  amp  xe032  Text lt  option gt   lt  select gt    Here s a list of the icons with their unicode   http   glyphicons bootstrapcheatsheets com

User · Answer

I don t think the standard HTML select will display HTML content  I d suggest checking out Bootstrap select  http   silviomoreto github io bootstrap-select   It has several options for displaying icons or other HTML markup in the select    lt select id  mySelect  data-show-icon  true  gt     lt option data-content   lt i class  glyphicon glyphicon-cutlery  gt  lt  i gt   gt - lt  option gt     lt option data-subtext   lt i class  glyphicon glyphicon-eye-open  gt  lt  i gt   gt  lt  option gt     lt option data-subtext   lt i class  glyphicon glyphicon-heart-empty  gt  lt  i gt   gt  lt  option gt     lt option data-subtext   lt i class  glyphicon glyphicon-leaf  gt  lt  i gt   gt  lt  option gt     lt option data-subtext   lt i class  glyphicon glyphicon-music  gt  lt  i gt   gt  lt  option gt     lt option data-subtext   lt i class  glyphicon glyphicon-send  gt  lt  i gt   gt  lt  option gt     lt option data-subtext   lt i class  glyphicon glyphicon-star  gt  lt  i gt   gt  lt  option gt   lt  select gt    Here is a demo  https   www codeply com go l6ClKGBmLS

User · Answer

If you are using the glyphicon as the first character of the string  you can use the html char  see https   glyphicons bootstrapcheatsheets com   and then apply the font to the first character of the element       option  first-letter          font-family  Glyphicons Halflings

[twitter-bootstrap] How to use a Bootstrap 3 glyphicon in an html select

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to html-select

Examples related to glyphicons