FontAwesome 圖標在 react/next 應用程序中無法正常工作

Question

已解決 - TLDR； 將import '@fortawesome/fontawesome-svg-core/styles.css'添加到 _app.js / index.js 文件可以解決問題，並且 FontAwesome 可以按預期工作。 我的問題是由默認情況下包含 purgeCSS 的 npx npx-create-next-app引起的，這反過來又刪除了 FontAwesome 所需的 styles。

---

我在我的 Next 應用程序中使用 FontAwesome。 我遵循了 FA 網站上的React 指南，頁面上的圖標 SVG 是 output。 問題是，這些功能都不起作用，並且它們不能按照預期的字體大小進行縮放。

我不想通過手動定位 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

聽起來這與 purgeCSS 有關，它在使用create-next-app時默認使用，它會去除所需的 CSS。

添加import '@fortawesome/fontawesome-svg-core/styles.css'解決了這個問題，並且 FontAwesome 可以按預期工作。 就我而言，我將其添加到 _app.js 的頂部

Answer 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;
}

Answer 3

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

導入圖標：

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

並使用它：

<FontAwesomeIcon icon={yourIcon} />

您可以為圖標添加一個類名並使用該 class 來設置它的樣式。

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

這是一個關於向 next.js 添加字體真棒圖標的好視頻： https://youtu.be/kaA2aX4X3NU