vue3使用Font Awesome

Font Awesome 介绍

Font Awesome 是互联网的图标库和工具包，被数百万设计师、开发人员和内容创建者使用。

Font Awesome的图标非常丰富，基本涵盖你所需要的所有，所以我推荐在你的前端项目中使用它！并且它在使用上是方便的，快速的。Font Awesome同样支持vue2！

官网链接：字体真棒 (fontawesome.com)

安装Font Awesome

通过npm安装

1.添加SVG核心

首先，您需要使用 npm 或 yarn 来安装核心包，其中包括使图标工作的所有实用程序：

npm i --save @fortawesome/fontawesome-svg-core

2. 添加图标包

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

上面的每个依赖都是免费的，任选其一即可，或者安装全部

当然你也可以通过用户自定义套件安装你想要的不同类型的图标，前提是确保你已经在自己的套件中添加好了需要的图标：
 

npm i --save @fortawesome/kit-KIT_CODE@latest

3. 添加 Vue 组件

最后，安装 Font Awesome Vue 组件，vue3运行下面命令：

npm i --save @fortawesome/vue-fontawesome@latest-3

vue2：
 

npm i --save @fortawesome/vue-fontawesome@latest-2

依赖导入

项目的main.js(或ts)：
 

import App from './App.vue'

//   引入font awesome图标
/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faGear,faBars,faSun } from '@fortawesome/free-solid-svg-icons'


// 局部引入图标
/* add icons to the library */
library.add(faGear,faBars,faSun)


const app = createApp(App)

app.component('font-awesome-icon', FontAwesomeIcon)

app.mount('#app')

导入成功以后就可以在项目中使用：
 

<font-awesome-icon icon="fa-solid fa-gear" />

可能遇到的问题

由于上面的导入方式在导入时的要注意命名，导入时名称格式为小写fa加标签名首字母大写，如：
要导入fa-user图标，正确的名称为faUser，然后直接复制图标提供的代码片段，这里推荐字符串格式。