『VUE』vue 引入Font Awesome图标库（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

Font Awesome介绍

我一般是中文网搜索找到图标的英文名然后去官方网站搜索

官方网站(英文名搜索)

https://fontawesome.com

中文搜索图标

https://fontawesome.com.cn/v5

---

安装引入

npm 安装导入

npm install --save @fortawesome/fontawesome-svg-core
vue2
npm install --save @fortawesome/vue-fontawesome@2.x
vue3
npm install --save @fortawesome/vue-fontawesome@3.x

npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons

src/main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

---

使用

图标的vue支持,复制代码

 <font-awesome-icon :icon="['fas', 'upload']" />

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---