Bootstrap 3.3.7 选择选项中的字形图标答案

【问题标题】：Bootstrap 3.3.7 Glyphicons in Select optionBootstrap 3.3.7 选择选项中的字形图标
【发布时间】：2021-07-14 10:37:25
【问题描述】：

我正在使用 Bootstrap 3.3.7 在现有网站上工作，我需要使用 glyphicons。它适用于任何地方，但在选择选项中，它会显示一个包含 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>

这是我发现显示字形图标的唯一方法，但前提是选择了该选项。在下拉菜单中，它仍然显示平方误差。

我试过了：

<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

【问题讨论】：

标签： html twitter-bootstrap select drop-down-menu

【解决方案1】：

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

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

【讨论】：

这就是我对“”、“”、“”所做的。这就是为什么它在选择时显示的原因，因为它在选择中。谢谢我会改变选择