引入依赖项

向项目引入Font Awesome的依赖项：

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

其中：

@fortawesome/fontawesome-svg-core 是通过JavaScript操作SVG的基础模块
@fortawesome/free-solid-svg-icons 和 @fortawesome/free-regular-svg-icons 是常规图标字体的SVG内容
@fortawesome/free-brands-svg-icons 是商标/品牌字体的SVG内容（可选）
@fortawesome/react-fontawesome 是React.js标准的组件模块

注册Next.js全局模块

借助Next.js的自定义布局功能，调整 /pages/_app.js 文件，加入Font Awesome样式和功能模块，以实现 Font Awesome 字体在项目中的全局可用性：

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

export default function MyApp({ Component, pageProps }) {
  return 
}

使用字体组件

在React.js文件中使用Font Awesome字体组件需要两个步骤：

引入 FontAwesomeIcon 组件
通过字体名称引入需要使用的字体内容
传递字体内容为 FontAwesomeIcon 组件的 icon 属性

以 GitHub 和 笑脸 图标为例：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFaceSmile } from '@fortawesome/free-solid-svg-icons' // solid风格
import { faGithub } from "@fortawesome/free-brands-svg-icons"; // （可选）品牌图标

export default function Home() {
  return (
    <div className="container">
      <main>
        <h1 className="title">
          <FontAwesomeIcon icon={faFaceSmile} />
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        <p>
          <FontAwesomeIcon icon={faGithub} /> GitHub
        </p>
      </main>
    </div>
  )
}