Javascript 在Vue 3中使用令人敬畏的字体

我正在尝试在VUE3中使用令人敬畏的字体

我的package.json中有它

在main.js中导入

这里面的组件

但当我在组件中使用它时，什么都没有发生。。。In元素不呈现任何内容，它只显示HTML注释

---

如何解决此问题并开始在任何组件中使用FontAwesome？

这些步骤使它对我有效：

安装与vue 3兼容的vue fontawesome的PreRelease，以及图标依赖项：

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

在main.js中，从@fortawesome/free solid svg图标中选择要加载的图标：

从@fortawesome/fontawesome svg核心导入{library}； 从@fortawesome/free实心svg图标导入{faPhone}； library.addfaPhone； 全局注册字体图标组件：

从@fortawesome/vue fontawesome导入{FontAwesomeIcon}； CreateAppp .componentfont awesome图标，Fontawesome图标 .mountapp； 在src/App.vue中，使用如下组件注意图标名称为phone，而不是faPhone：

---

好的，所以问题基本上只是我写了['fas'，'faPhone']，而不是['fas'，'phone']

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPhone } from "@fortawesome/free-solid-svg-icons/faAddressBook";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faPhone);

/* eslint-disable */
createApp(App)
  .use(store)
  .use(router)
    .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app")

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

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