在 nextJS 中将规范标签添加到头部会使 FontAwesomeIcon 类不起作用答案

【问题标题】：adding canonical tag to head in nextJS makes FontAwesomeIcon classes not work在 nextJS 中将规范标签添加到头部会使 FontAwesomeIcon 类不起作用
【发布时间】：2021-05-29 18:16:15
【问题描述】：

我在添加的时候在 nextjs 中遇到了一个奇怪的错误

  <Head>
    <link rel="canonical" href="url"></link>
  </Head>

在我的 index.tsx 中，该页面中的一个元素无法正确呈现。我确实使用

<FontAwesomeIcon icon={song.voted === true ? faHeart : fasHeart} className={`text-2xl color-text-red`} />

其中添加了这些标准类svg-inline--fa fa-youtube fa-w-18 text-2xl color-text-red。

奇怪的是，当没有添加规范标签时，这些类确实可以正常工作

添加标签后，width和svg-inline--fa没有被渲染（尝试刷新，重启服务器，prod en dev环境）

这些是我的依赖项

"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"autoprefixer": "^10.2.3",
"file-loader": "^6.2.0",
"mysql": "^2.18.1",
"next": "latest",
"next-fonts": "^1.5.1",
"next-images": "^1.7.0",
"next-svgr": "0.0.2",
"next-transpile-modules": "^6.0.0",
"node-sass": "^5.0.0",
"postcss": "^8.2.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-rainbow-components": "^1.24.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"tailwindcss": "^2.0.2"

有没有人遇到过这个问题或对如何解决它有任何想法？

提前谢谢

【问题讨论】：

标签： reactjs next.js font-awesome

【解决方案1】：

对于 OP 来说可能为时已晚，但对于未来的人来说，这似乎应该回答这个问题。

添加到 _app.js

import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;

来源： https://github.com/FortAwesome/react-fontawesome/issues/410#issuecomment-787468285

【讨论】：