Next.js项目中FontAwesome图标不渲染的原因及修复方案

• 未安装/导入对应图标资源：你只引入了FontAwesome的核心包和React组件，没有安装品牌图标包，也没有注册要使用的Facebook图标，组件无法识别传入的图标字符串，因此不会渲染任何DOM元素。
• 存在冗余且不规范的样式引入：你已经在_app.js全局引入了核心样式文件，不需要在index.js中重复通过../node_modules/路径引入样式，该路径写法本身也不符合Next.js的模块引入规范。

1. 首先安装缺失的品牌图标依赖，在项目根目录执行对应包管理命令：

   # npm
   npm install @fortawesome/free-brands-svg-icons
   # pnpm
   pnpm add @fortawesome/free-brands-svg-icons
   # yarn
   yarn add @fortawesome/free-brands-svg-icons
   

2. 修改_app.js，全局注册需要使用的图标，修正后代码如下：

   import '../styles/globals.css'
   import { config, library } from '@fortawesome/fontawesome-svg-core'
   import '@fortawesome/fontawesome-svg-core/styles.css'
   // 导入需要使用的Facebook品牌图标
   import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
   
   config.autoAddCss = false
   // 将图标加入全局库，后续页面可直接通过字符串名称调用图标
   library.add(faFacebookF)
   
   function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />
   }
   
   export default MyApp
   

3. 清理index.js中的冗余代码，删除重复的样式引入语句，修正后代码如下：

   import React, { Fragment } from "react"
   import Head from 'next/head'
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
   
   export default function Home() {
     return (
       <Fragment>
         <FontAwesomeIcon icon="fa-brands fa-facebook-f" />
       </Fragment>
     )
   }
   

如果你不想全局注册图标，也可以跳过_app.js里的library配置，直接在使用图标的页面单独导入图标对象传入组件，这种方式更适合图标使用量少的场景，能减少不必要的打包体积，写法如下：

// index.js
import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
// 组件内使用
<FontAwesomeIcon icon={faFacebookF} />

内容的提问来源于stack exchange，提问作者iamaprogrammer