如何在Laravel项目的Vue.js中使用Font Awesome 5？图标不显示如何解决

核心问题梳理 #

你当前的配置存在3个不兼容问题，直接导致图标无法显示：

• 依赖不完整：你安装的@fortawesome/fontawesome-free是Web字体/CSS方案的依赖，但main.js中导入的是SVG组件方案的相关模块，这部分依赖你完全没有安装
• 图标未注册：即使使用SVG组件方案，你只往图标库中添加了faSpinner，用到的fa-ellipsis-v（对应faEllipsisV）没有注册，也没有全局注册FontAwesomeIcon组件
• 使用方式不匹配：你页面用的是Web字体方案的<i>标签写法，和你main.js导入的SVG组件方案不兼容，两种方案只能选其一使用

注意：两种方案不要同时使用，避免出现样式冲突导致图标渲染异常。

方案一：继续使用SVG组件方案（更适合Vue项目按需引入） #

步骤1：安装缺失依赖 #

在项目根目录执行命令：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome --save-dev

步骤2：修改main.js配置 #

补充图标注册和全局组件注册：

import { library } from '@fortawesome/fontawesome-svg-core'
// 导入用到的图标，后续新增图标都要在此处导入
import { faSpinner, faEllipsisV } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 把用到的图标加入全局库
library.add(faSpinner, faEllipsisV)
// 全局注册图标组件（Vue2写法）
Vue.component('font-awesome-icon', FontAwesomeIcon)

步骤3：修改页面图标使用写法 #

把之前的<i>标签写法换成组件写法即可：

<font-awesome-icon icon="ellipsis-v" />
<!-- 多图标库共存时可指定前缀写法 -->
<font-awesome-icon :icon="['fas', 'ellipsis-v']" />

方案二：改用Web字体/CSS方案（不需要修改现有<i>标签写法） #

步骤1：移除main.js里SVG方案的相关导入 #

把这三行代码删掉：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

步骤2：全局导入Font Awesome样式 #

可以在项目全局scss文件（比如app.scss）里导入：

@import '~@fortawesome/fontawesome-free/css/all.css';

也可以直接在main.js里导入：

import '@fortawesome/fontawesome-free/css/all.css'

步骤3：重新编译项目 #

执行npm run dev或者npm run watch重新打包，原有<i class="fas fa-ellipsis-v"></i>写法可以直接生效。

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