Angular 2中如何在select选项前添加图标？

首先回答你的初始问题：原生<select>的<option>能加图标吗？ #

原生的<select>和<option>元素对HTML内容的支持非常有限，绝大多数浏览器不会渲染<option>内的HTML标签或字体图标（仅极少数特殊场景可能支持），所以直接在<option>里插入Font Awesome的字符实体或图标类，大概率无法正常显示——这也是你遇到空方块的核心原因之一。

针对你当前的空方块问题，先排查几个常见原因： #

• 字体文件路径/加载问题：确认angular-cli.json里的Font Awesome样式路径是否正确。比如你的项目中，angular-cli.json所在目录往上一级是否确实有node_modules/font-awesome-4.7.0？如果路径错误，字体文件无法加载，就会显示空方块。
• 类名混淆问题：你给<select>加了glyphicon类，但你用的是Font Awesome，不是Bootstrap的Glyphicons，这个类不仅没用，还可能和Font Awesome的样式冲突。而且原生<option>不支持解析内部的字体图标类样式，浏览器会忽略这些设置。
• 字符实体正确性：Font Awesome 4.7中汽车图标fa-car的字符实体确实是，这部分是对的，但前提是字体文件已正确加载。

可行的替代方案（因为原生select无法满足需求） #

既然原生<select>不支持自定义图标，推荐两种靠谱的解决方式：

方案1：使用Angular+Bootstrap兼容的UI组件库 #

比如适配Bootstrap 3的ng-bootstrap组件库，它的dropdown组件可以完全自定义下拉项内容，轻松实现图标+文本的效果：

<!-- 组件模板代码 -->
<div ngbDropdown class="d-inline-block">
  <button class="btn btn-default form-control" id="carDropdown" ngbDropdownToggle>
    {{selectedCar?.ID || '请选择车辆'}}
  </button>
  <div ngbDropdownMenu aria-labelledby="carDropdown">
    <button *ngFor="let car of cars" ngbDropdownItem (click)="selectCar(car)">
      <i class="fa fa-car"></i> {{car.ID}}
    </button>
  </div>
</div>

// 组件类逻辑
selectedCar: any;

selectCar(car: any) {
  this.selectedCar = car;
}

这个方案样式和Bootstrap 3完全匹配，无需自己写复杂的CSS。

方案2：自定义CSS模拟下拉框 #

如果不想引入第三方组件，可以用HTML元素模拟原生select的行为，完全控制内容样式：

<!-- 组件模板代码 -->
<div class="custom-select-container">
  <div class="custom-select-trigger" (click)="toggleDropdown()">
    <span>{{selectedCar?.ID || '请选择车辆'}}</span>
    <i class="fa fa-chevron-down"></i>
  </div>
  <ul class="custom-select-options" *ngIf="isDropdownOpen">
    <li *ngFor="let car of cars" (click)="selectCar(car)">
      <i class="fa fa-car"></i> {{car.ID}}
    </li>
  </ul>
</div>

/* 自定义样式 */
.custom-select-container {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  z-index: 100;
}

.custom-select-options li {
  padding: 6px 12px;
  cursor: pointer;
}

.custom-select-options li:hover {
  background-color: #f5f5f5;
}

// 组件类逻辑
isDropdownOpen = false;
selectedCar: any;

toggleDropdown() {
  this.isDropdownOpen = !this.isDropdownOpen;
}

selectCar(car: any) {
  this.selectedCar = car;
  this.isDropdownOpen = false;
}

这个方案完全自定义，灵活性更高，也能完美显示图标。

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