How to use a Bootstrap 3 glyphicon in an html select

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/

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

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