使用我的solution here，基于unplugin-icons能够解决OP的问题。
最后，像这样的东西会产生完全相同的结果，但它是通用的，高性能的，而且你只需要对任何类型的未来库做一次结果。

<script setup>
import IconXmark from `~icons/fa6-solid/xmark`
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
</template>

安装软件包

pnpm i @fortawesome/fontawesome-svg-core
pnpm i @fortawesome/free-solid-svg-icons
pnpm i @fortawesome/free-regular-svg-icons
pnpm i @fortawesome/free-brands-svg-icons

添加此插件

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSms } from '@fortawesome/free-solid-svg-icons'
import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons'

library.add(faTwitter)
library.add(faFacebook)
library.add(faSms)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

好好享受

<template>
  <font-awesome-icon icon="fa-brand fa-whatsapp" />
</template>

我正在使用：

npm i @fortawesome/fontawesome-free

在我的资产文件夹中导入：

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

注意：您需要确切的路径。
现在注册：

// nuxt.config.ts

import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
  css: ["~/assets/main.css"],
});

是的，你可以开始了。你可以去fontawesome，搜索一个图标，然后复制粘贴它：

<i class="fa-solid fa-user"></i>

那你应该能看到。

这与最新的更新不一致。下面是你应该如何在Nuxt3上安装font-awesome。
1.* * 安装**

npm i -D @fortawesome/fontawesome-svg-core
npm i -D @fortawesome/free-solid-svg-icons
npm i -D @fortawesome/free-regular-svg-icons
npm i -D @fortawesome/free-brands-svg-icons
npm i -D @fortawesome/vue-fontawesome@latest-3    <=== Extremely Critical

1.* * 新配置**

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/font-awesome.ts' },
  ],
})

1.* * 插件配置**

import {library, config} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {
  faHospital as farHospital
} from '@fortawesome/free-regular-svg-icons'
import {
  faCircleUser as fasCircleUser,
  faBars as fasBars,
  faHospital as fasHospital
} from '@fortawesome/free-solid-svg-icons'
import {faDiscord as fabDiscord} from '@fortawesome/free-brands-svg-icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(
  farHospital,
  fasHospital,
  fasBars,
  fabDiscord
)

export default defineNuxtPlugin(({vueApp}) => {
  vueApp.component('FontAwesomeIcon', FontAwesomeIcon)
})

1.* * 测试渲染**

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'hospital']" />
    <font-awesome-icon :icon="['far', 'hospital']" />
    <font-awesome-icon :icon="['fas', 'bars']" />
  </div>
<template>