Bootstrap 3.3.7 Select 选项中的字形

Question

我正在使用 Bootstrap 3.3.7 在现有网站上工作，我需要使用字形图标。它无处不在，但在 select 选项中，它显示一个带有 4 个字符（对应于 glyphicon unicode）的正方形，就像它无法显示某些图像时一样。

这是我的代码：

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

这是我发现显示字形的唯一方法，但前提是该选项已 selected。在下拉列表中它仍然显示平方误差。

我试过了：

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

到目前为止的结果：Select option with glyphicons

Answer 1

Selects 中的选项只支持纯文本。 Glyphicons 建立在 CSS 类之上，在 .

中不起作用

但是，如果您使用 unicode 表示，这可能适用于某些图标，您可以在这里找到它们：https://glyphicons.bootstrapcheatsheets.com/#

Bootstrap 3.3.7 Select 选项中的字形

Bootstrap 3.3.7 Glyphicons in Select option

html

select

twitter-bootstrap

drop-down-menu