FontAwesome 图标在 react/next 应用程序中无法正常工作

Question

已解决 - TLDR；将 import '@fortawesome/fontawesome-svg-core/styles.css' 添加到 _app.js / index.js 文件可以解决问题，并且 FontAwesome 可以按预期工作。我的问题是由 npx-create-next-app 默认包含 purgeCSS 引起的，它又剥离了 FontAwesome 所需的样式。

我在我的 Next 应用程序中使用 FontAwesome。我遵循了 React guide on the FA website and the icon SVG's are being output on the page. Problem is, none of the features 的工作，但它们并没有按照预期的方式缩放字体大小。

我不想通过手动定位 SVG 和添加大小等方式将其整合在一起，因为它在响应方面并不理想。也就是说，如果图标随附文字缩放，并能够添加 'spinner'、'fixedWidth' 等

，那就太好了

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

// 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

我像这样在我的 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 2

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

导入图标：

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

并使用它：

<FontAwesomeIcon icon={yourIcon} />

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

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

这里有一段关于向 next.js 添加超赞字体图标的精彩视频：https://youtu.be/kaA2aX4X3NU

Answer 3

已修复。问题是在使用 npx-create-next-app 时添加到项目中的 purgeCSS。 purgeCSS 正在清除所需的 FontAwesome 样式。

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

具体来说，我将 import '@fortawesome/fontawesome-svg-core/styles.css' 添加到 _app.js。

Answer 4

根据文档，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

FontAwesome 图标在 react/next 应用程序中无法正常工作

FontAwesome Icons not working properly in react/next app

font-awesome

reactjs

next.js