在vue中使用fortawesome，只需要引入fortawesome

安装

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

在main.js中配置

// src/main.js

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUser, faCamera } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
library.add(faUser, faCamera)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)
...
...

在html中使用

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

问题

上述操作可以在html引入时，正常显示，但是在css伪元素中引入时，就只显示了一个框，并不显示图标。查询多个地方也没找到解决方法。

然后自己找了种方法引入了css,虽然现在显示了，但总觉得重复引入了，目前也没找到更好的方法，希望告知更好的方式。

问题解决方式

安装fortawesome[要记住安装版本，我这里安装的是6免费版]

npm install --save @fortawesome/fontawesome-free

在main.js中引入css

import "@fortawesome/fontawesome-free/css/all.css";

在css伪元素中使用

 &::before {
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        content: '\f06e';
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

unicode查询位置：官网链接