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

【问题标题】：FontAwesome Icons not working properly in react/next appFontAwesome 图标在 react/next 应用程序中无法正常工作
【发布时间】：2021-06-06 22:01:13
【问题描述】：

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

我在我的 Next 应用中使用 FontAwesome。我关注了 FA 网站上的 React guide，图标 SVG 正在页面上输出。问题是，features 都不起作用，并且它们没有按预期的字体大小进行缩放。

我不想通过手动定位 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>
  )
}

【问题讨论】：

标签： reactjs next.js font-awesome

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我在这样的 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;
}

【讨论】：

我正在尝试使用全局方法来简化事情。我也尝试过这种按组件导入图标的方法，但它们仍然不能随字体大小缩放，并且所有选项都不起作用。我当然可以使用类来定位图标，但我试图让它按照预期的方式工作，并允许我使用内置功能，例如 fixedWidth 和 size="lg"

【解决方案3】：

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

导入图标：

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

并使用它：

<FontAwesomeIcon icon={yourIcon} />

您可以为图标添加类名并使用该类对其进行样式设置。

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

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

【讨论】：

我的问题是没有让图标加载或任何东西，那个位工作正常。问题是它们没有按预期工作。 FA 功能都不起作用，并且图标不会像预期的那样从 font-size 继承大小。我想让他们按照 FA 预期的方式工作，这对于响应能力等事情要好得多。即伴随文本的图标可以自动与文本一起缩放，而不是为每个单独创建媒体查询。