Bootstrap 3.3.7 Glyphicons in Select option

Viewed 396

I'm working on an existing website using Bootstrap 3.3.7 and I need to use glyphicons. It works everywhere but in a select option it shows a square with 4 characters (corresponding to the glyphicon unicode) in it like when it can't display some image.

Here's my code :

<select class="form-control glyphicon" name="typeMessage" id="typeMessage" required="true">
   <option value="glyphicon glyphicon-exclamation-sign" selected="selected"> <span class="icon glyphicon">&#xe101;</span> Information</option>
   <option value="glyphicon glyphicon-wrench">                               <span class="icon glyphicon">&#xe136;</span> Maintenance</option>
   <option value="glyphicon glyphicon-warning-sign">                         <span class="icon glyphicon">&#xe107;</span> Incident</option>
</select>

That's the only way I found to display the glyphicons but ONLY if the option is selected. In the dropdown it still shows the square error thing.

I've tried :

<option value="glyphicon glyphicon-warning-sign" data-content="glyphicon glyphicon-warning-sign">
<option value="glyphicon glyphicon-warning-sign" data-subtext="glyphicon glyphicon-warning-sign">
<i class="fas fa-info-circle"></i>
<i class="glyphicon glyphicon-exclamation-sign"></i>

Result so far: Select option with glyphicons

1 Answers

Options in Selects doesn't support anything but pure texts. Glyphicons is built on CSS classes, which wont work inside the .

However, this could work with SOME icons if you use the unicode representation, you can find them here: https://glyphicons.bootstrapcheatsheets.com/#

Related