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

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

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

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    lt div class  btn-group  gt       lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  gt          Select icon  lt span class  caret  gt  lt  span gt       lt  button gt       lt ul class  dropdown-menu list-inline  role  menu  gt           lt li gt  lt span class  glyphicon glyphicon-cutlery  gt  lt  span gt  lt  li gt           lt li gt  lt span class  glyphicon glyphicon-fire  gt  lt  span gt  lt  li gt           lt li gt  lt span class  glyphicon glyphicon-glass  gt  lt  span gt  lt  li gt           lt li gt  lt span class  glyphicon glyphicon-heart  gt  lt  span gt  lt  li gt                 lt  ul gt   lt  div gt    I m using Angular js so this is the actual code I used    lt div class  btn-group  gt               lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  gt                  Avatar  lt span class  caret  gt  lt  span gt               lt  button gt               lt ul class  dropdown-menu list-inline  role  menu  gt                   lt li ng-repeat  avatar in avatars  ng-click  avatarSelected avatar   gt                       lt span ng-class  getAvatar avatar   gt  lt  span gt                   lt  li gt               lt  ul gt           lt  div gt    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

[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