在 Vue.js 中使用 Font Awesome

官方文档https://fontawesome.com/docs/web/use-with/vue/

1、安装核心包：

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

2、安装Font Awesome Vue组件:

Vue 2.x
npm i --save @fortawesome/vue-fontawesome@latest-2

3、按需安装图标包：
免费图标
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

4、使用

src\main.js

// 图标库
import './plugins/fontawesome.js'

按需引入图标

src\plugins\fontawesome.js

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { 
  faBell
} from '@fortawesome/free-solid-svg-icons'

library.add(
  faBell
);

Vue.component('icon', FontAwesomeIcon)

在项目组件中的任意地方使用图标：

<div class="message" @click="drawer = true">
    <el-badge :value="messageNum" :max="99">

         <icon :icon="['fas', 'bell']"></icon>


    </el-badge>
</div>