我站建站过程中一直在使用流行的Font Awesome字体图标库，如何在Vue中使用Font Awesome呢？下列做个比较详细的教程，先了解一下基础知识。
一、如何区分Font Awesome Free与Pro
Font Awesome Free包含：Solid、Regular、Regular，Font Awesome Pro包含：Light、Duotone，这里Pro就不详解了。
我们在使用Free时为了保持一致性，推荐组合：Solid、Brands或者Regular、Brands，即：Solid与Regular不要同时使用，因为一个是粗体，一个是正常大小，为了视觉一致性，就分开使用。
二、Vue中以web浏览器方式引用
网页形式引用常见是CSS方式，我在Font Awesome 字体图标对照中有介绍，这里不过多介绍。
Vue项目中，可以使用Vue的template功能实现，以@vue/cli创建的项目为例，具体方法如下：
在public/index.html的body结束标签前引入js：
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/fontawesome.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/brands.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/js/solid.min.js"></script>
在vue页面调用，如：
此方法是参考：https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/using-package-managers#next
注：CSS方式引用同样可以在public/index.html的head标签中引用，就不赘述了。
三、vue-fontawesome
vue-fontawesome：Font Awesome 5 Vue component using SVG with JS。
1、安装
先安装内核依赖包
yarn add @fortawesome/fontawesome-svg-core安装后并没有任何图标，这只是font awesome的svg方案，还需要引入图标库。按照之前的“Solid与Regular不要同时使用”原则，我们选择性安装图标。
yarn add @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons或者
yarn add @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons二选一即可。
2、全局注册组件
src/main.js中加入：
import { library } from '@fortawesome/fontawesome-svg-core' // 内核
import { faUserSecret } from '@fortawesome/free-solid-svg-icons' // 粗体
import { faWordpress} from '@fortawesome/free-brands-svg-icons' // 品牌
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Vue依赖
library.add(faUserSecret,faWordpress) // 引入两个图标
Vue.component('font-awesome-icon', FontAwesomeIcon) // 注册全局组件3、使用图标
<!-- The solid style is implicit -->
<font-awesome-icon icon="user-secret" />
<!-- It's better to be explicit -->
<!-- Don't forget to bind the property with ":" (we forget all the time!) -->
<font-awesome-icon :icon="['fas', 'user-secret']" />
<!-- The brands style is implicit -->
<font-awesome-icon icon="wordpress" />
<!-- It's better to be explicit -->
<!-- Don't forget to bind the property with ":" (we forget all the time!) -->
<font-awesome-icon :icon="['fab', 'wordpress']" />四、svg-sprite-loader + @fortawesome/fontawesome-free
此方案说说思路，svg-sprite-loader是可以广泛用于vue和webpack中的，思路是
1、安装@fortawesome/fontawesome-free，通过svg-sprite-loader加载所有的@fortawesome/fontawesome-free的图标。
2、写一个SvgIcon的vue组件，然后传参icon-[name]的方式实现。
参考文档：https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html
可以下载vue-element-admin的源码，看看SvgIcon组件的写法和使用，我相信会此方法的大佬，其实整篇文章都过于简单了哈，请略过。
五、参考资料
https://www.npmjs.com/package/@fortawesome/vue-fontawesome
https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/svg-javascript-core
https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/using-package-managers