FontAwesome 图标在反应/下一个应用程序中无法正常工作

Question

已解决 - TLDR；将

import '@fortawesome/fontawesome-svg-core/styles.css'

添加到 _app.js / index.js 文件修复了该问题，并且 FontAwesome 按预期工作。我的问题是由

npx-create-next-app

引起的，默认情况下包括 purgeCSS，这反过来又删除了 FontAwesome 所需的样式。

---

我在我的 Next 应用程序中使用 FontAwesome。我按照 FA 网站上的 React 指南 操作，图标 SVG 正在页面上输出。问题是，所有功能都不起作用，并且它们不能按照预期的方式随字体大小缩放。

我不想通过手动定位 SVG 并添加大小等方式将其组合在一起，因为它在响应能力方面并不理想。也就是说，如果图标能够随随附文本一起缩放，并且能够添加“旋转器”、“固定宽度”等，那就太好了。

奇怪的是，他们已经开始工作一两次，但然后又坏了，我似乎无法重现。

// package.json
"dependencies": {
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/pro-regular-svg-icons": "^5.15.2",
  }

// _app.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHeart } from '@fortawesome/pro-regular-svg-icons'
library.add( faHeart )

// header.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function Header() {

  return (
    <header>
      <FontAwesomeIcon icon={['far', 'heart']} spin />
    </header>
  )
}

// style.css
header {
 font-size: 20px; (does nothing to the icon)
}

svg {
 width: 20px; (works, but this shouldn't be required according to FA docs)
}

我也尝试过单独使用（将图标导入到单独的组件中，而不是利用库函数）达到相同的效果。像这样：

// header.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/pro-regular-svg-icons'

export default function Header() {

  return (
    <header>
      <FontAwesomeIcon icon={faHeart} spin />
    </header>
  )
}

Answer 1

修好了。问题是使用

npx-create-next-app

时添加到项目中的 purgeCSS。 purgeCSS 正在清除所需的 FontAwesome 样式。

显式导入 FontAwesome 样式解决了该问题。

具体来说，我将

import '@fortawesome/fontawesome-svg-core/styles.css'

添加到 _app.js 中。

Answer 2

根据文档，react-fontawesome 组件与 Next.js 集成良好，但有一个问题需要解决。由于 Next.js 以不同的方式管理 CSS

在你的项目条目中，可能是 App.js

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

Next.js 允许您直接在 .js 文件中导入 CSS。它处理优化和所有必要的 Webpack 配置以使其工作。

import '@fortawesome/fontawesome-svg-core/styles.css'

您将此配置值更改为 false，以便 Font Awesome 核心 SVG 库不会尝试将元素插入页面。 Next.js 无论如何都会阻止这种情况发生，所以你最好不要尝试。

config.autoAddCss = false

Answer 3

我在我的 React 应用程序中使用 FontAwesomeIcon，如下所示，它有效：

import { faHeart} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

in the code:

<FontAwesomeIcon  className="icon" icon={faHeart} />
                        

在CSS中：

.icon{
color: ; / if you want to change color
font-size: 36px;
}

Answer 4

本质上，您需要做的就是：

导入图标：

import { yourIcon} from "@fortawesome/free-solid-svg-icons";

并使用它：

<FontAwesomeIcon icon={yourIcon} />

您可以向图标添加类名并使用该类来设置其样式。

<FontAwesomeIcon icon={yourIcon} className="styled-icon" />

这是一个关于向 next.js 添加很棒的字体图标的精彩视频：https://youtu.be/kaA2aX4X3NU

Answer 5

注意这是为那些在 2024 年末或 2025 年查看此问题的人提供的解决方案

如果您将 Next.js 15 与 TypeScript 和 Tailwind CSS 结合使用，以下是如何顺利集成 FontAwesome 图标的方法，特别是当您由于依赖冲突而使用 React 18 时。

步骤：

安装必要的软件包

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome

在layout.tsx（或_app.tsx）中添加以下行以防止FontAwesome的CSS冲突。

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

这是项目.tsx 的示例

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from '@fortawesome/free-brands-svg-icons';

export default function Projects() {
  return (
    <a href="https://github.com/your-profile" target="_blank">
      <FontAwesomeIcon
        icon={faGithub}
        className="text-white text-4xl hover:text-blue-300 transition-colors"
      />
    </a>
  );
}

总结

此设置使得即使在使用 React 18 时，也可以在 Next.js 15 中通过 TypeScript 和 Tailwind CSS 顺利使用 FontAwesome。我花了几个小时才弄清楚这一点，希望你不会！