RFS_Server_07 在Vue3代码中引入FontAwesome组件

操作描述：至2024年6月底，FontAwesome在大力推荐它的Kit引入方式。此方法需要token，故而必须注册账号，且平台联网。本文介绍的方法只引入FontAwesome的三个免费图标库，无需注册账号，方法来自官网。

方法1 个人博客方法（不推荐）

参考文章：

Vue 第三方字体图标引入 Font Awesome的方法_vue.js_脚本之家

# npm安装font-awesome
npm install font-awesome --save-dev

# fontawesome引入，在main.js文件中引入font-awesome
import 'font-awesome/scss/font-awesome.scss'

# 然后在组件中使用即可实现
< span class="fa fa-camera-retro fa-lg"></span>

此文章2018年发布，距今过去6年，引入的图标较少，FontAwesome图标库已经更新许多。

最佳的教程是当下官网提供的方法，但官网主推Kit，要在官方Document中找到Vue引入，且npm直接安装，且只安装免费库的教程。

！！！官网是全英文的，地址为：Font Awesome

方法2 官网文档

参考文档：

Add Icons with Vue | Font Awesome Docs

Set Up with Vue | Font Awesome Docs

1. Add SVG Core 加入SVG组件

First you’ll need to use npm or yarn to install the core package which includes all the utilities to make the icons work

第一步：安装能解析SVG的组件

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

2.Add Icon Packages 安装图标库

Next, you’ll install the icons you want to use — you can choose a Kit Package or SVG Icon Packages, and select any of our styles.

第二步：安装FontAwesome免费图标库如果看官网文档，记得选Free SVG Icon Package。只有solid、regular、brands这三个是免费的。

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

3.Add the Vue Component 安装Vue组件

对于Vue 3.x 版本，运行以下代码：

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

安装结束，加入以下图标测试是否正常工作：

<font-awesome-icon icon="house" />