迁移至Vue.js后含Font Awesome图标下拉列表无法渲染

API 探路者

2026-5-20

解决Vue.js中无法渲染Font Awesome图标的下拉选择列表问题

我之前迁移旧项目时也碰到过一模一样的问题，核心原因是Vue默认会对模板里的HTML实体做转义处理，而你原来的jQuery/Bootstrap环境不会这么做——这就导致那些Font Awesome的Unicode图标实体（比如）在Vue里被当成普通文本显示，没法渲染成图标。

下面是具体的解决步骤，亲测有效：

1. 先确保Font Awesome CSS已正确引入

这是基础前提，要是样式没加载，就算实体解析对了也看不到图标：

如果是通过npm/yarn安装的Font Awesome，在项目入口文件（比如main.js）里引入：
```
import '@fortawesome/fontawesome-free/css/all.css'
```

或者直接在public/index.html里通过CDN引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

2. 用`v-html`指令绕过HTML转义

Vue的v-html指令会跳过默认的转义逻辑，直接把内容解析成HTML，刚好能解决图标实体被转义的问题。

第一步：整理选项数据源

在Vue组件的data里把下拉选项统一管理起来：

export default {
  data() {
    return {
      selectedIcon: '',
      faOptions: [
        { value: 'fa fa-address-book', label: '&#xf2b9; fa-address-book' },
        { value: 'fa fa-address-book-o', label: '&#xf2ba; fa-address-book-o' }
        // 其他选项继续往这里加就行
      ]
    }
  }
}

第二步：修改模板代码

用v-for遍历选项，通过v-html绑定选项的标签内容：

<select id='fa_select' v-model="selectedIcon">
  <option 
    v-for="option in faOptions" 
    :key="option.value" 
    :value="option.value"
    v-html="option.label"
  ></option>
</select>

这样处理后，Vue就会正确解析那些Unicode实体，下拉列表里的Font Awesome图标就能正常显示了。