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:

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

However all I get are blank lines. Any help or alternative suggestions appreciated.

Answer 1

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.

<select class="form-control glyphicon">
    <option value="">&#x2212; &#x2212; &#x2212; Hello</option>
    <option value="glyphicon-list-alt">&#xe032; Text</option>
</select>

Here's a list of the icons with their unicode:

http://glyphicons.bootstrapcheatsheets.com/