Angular 5中Glyphicon图标在下拉框选项中不显示问题

我懂你遇到的这个坑——原生<select>的下拉选项里Glyphicon图标死活不显示，但选中后又能正常展示，这其实是原生HTML <option>元素的局限性导致的。大多数浏览器不会在<option>标签内渲染字体图标或者复杂HTML内容，哪怕你直接写了Glyphicon的Unicode编码，下拉列表里也只会显示纯文本甚至乱码；而选中后的内容是渲染在<select>本身的显示区域，这里因为你给select加了glyphicon类，字体能正常加载，所以显示没问题。

给你两个可行的解决方案：

方案一：使用自定义下拉组件（推荐） #

原生select的option限制太多，换成Angular生态里的自定义下拉组件就能完美解决这个问题，比如Angular Material的MatSelect，它的选项组件支持完整的HTML渲染：

先确保你已经安装并配置了Angular Material，然后替换你的代码：

<mat-form-field>
  <mat-select class="form-control" required>
    <mat-option value="empty"></mat-option>
    <mat-option *ngFor="let car of cars" value="true">
      <span class="glyphicon glyphicon-check"></span> {{car.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

这样每个下拉选项里的Glyphicon图标都能正常显示，而且后续样式自定义也更灵活。

方案二：用CSS伪元素兼容原生select（兼容性有限） #

如果一定要坚持用原生<select>，可以尝试通过CSS伪元素给选项添加图标，绕过<option>不支持字体图标的限制：

先修改HTML代码，给选项加一个专属类：

<select class="form-control" required>
  <option value="empty"></option>
  <option *ngFor="let car of cars" value="true" class="car-option">{{car.name}}</option>
</select>

然后添加对应的CSS样式：

.car-option:before {
  font-family: 'Glyphicons Halflings';
  content: "\e043"; /* 对应你使用的check图标Unicode */
  margin-right: 8px;
}

注意：这种方法的兼容性要看浏览器，Chrome等现代浏览器基本支持，但IE这类旧浏览器可能不行，所以还是优先推荐方案一。

内容的提问来源于stack exchange，提问作者bellotas