vue3使用Font-Awesome

Font-Awesome已经更新到6.0.0了，6与5的安装相同。官网提供了详细的安装、使用教程:
Font-Awesome: Use with Vue

一、安装

官方提供了很多安装使用方式，这里仅展示一种

Git地址：vue-fontawesome

1、npm安装

• Install the core package and icon content 安装核心包和图标

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons

• Install this Vue component 安装vue组件

npm i --save @fortawesome/vue-fontawesome@prerelease

• Add more styles or Pro icons 安装更多样式图标（非必要）

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

付费用户可安装额外的样式包（即 light、thin、duotone）

2、或用yarn安装

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome@prerelease

yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons

二、使用

1、全局注册组件

Git上给出的实例：

import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

导入FontAwesomeIcon组件并全局注册；
导入faUserSecret图标，并加入到library，注意，这个实例仅仅只是导入了一个图标
导入全部图标是不被推荐的，会导入全部数千个图标，打包后体积过大

2、使用图标

在这里使用其他图标是无效的，因为之前仅导入了faUserSecret

<template>
  <div id="app">
    <font-awesome-icon icon="user-secret" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

fa官网：Icons | Font Awesome

同样一个图标，拥有四种样式，solid, regular, light, duotone，后两种全部需要付费

solid: <i class="fas fa-angry"></i>
regular: <i class="far fa-angry"></i>
light: <i class="fal fa-angry"></i>
duotone: <i class="fad fa-angry"></i>
此外还有Brands类图标也是免费的

回到实例，需要注意的是，之前导入使用的图标为“faUserSecret”

而使用时，用的是icon="user-secret"，没有指定图标类型

可以指定icon类型：:icon="['fas', 'user-secret']"，未指定类型时，默认是solid类型

3、使用同一图标的多个样式

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fadCoffee } from '@fortawesome/pro-duotone-svg-icons'

library.add(fasCoffee, farCoffee, falCoffee, fadCoffee)

<font-awesome-icon :icon="['fas', 'coffee']"/>
<font-awesome-icon :icon="['far', 'coffee']"/>
<font-awesome-icon :icon="['fal', 'coffee']"/>
<font-awesome-icon :icon="['fad', 'coffee']"/>

导入全部图标（不建议）：

import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fas, fab)

三、特性

font-awesome5的诸多特性可以将图标玩出花来
这里就不占了，直接看Git或官网吧
vue-fontawesome: Features
npmjs: vue-fontawesome: Features

四、参考链接

官网：Font-Awesome Icons
非vue使用教程：Font-Awesome中文网