Fontawesome 图标在按钮元素内时隐藏

Question

我刚刚将我的 fontawesome 升级到 6.0.0

"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^6.0.0",
"@fortawesome/free-regular-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/react-fontawesome": "^0.1.16",

我面临的问题是在带有父项的按钮内添加图标时 div。

这不显示图标

<div>
    <button>
    <FontAwesomeIcon
      icon={faHeart}
      size="2x"
      className={`transform motion-safe:group-focus:scale-110 p-1.5 z-10`}
      aria-hidden="true"
    />
    </button> 
</div>

如果我将其更改为简单的父级 div 它会正确显示。

<div>
    <div>
    <FontAwesomeIcon
      icon={faHeart}
      size="2x"
      className={`transform motion-safe:group-focus:scale-110 p-1.5 z-10`}
      aria-hidden="true"
    />
    </div>
</div>

有人知道为什么或如何让它与按钮一起工作吗？

Answer 1

请 post 你的导入语句，我怀疑是那个或周围的代码导致了你的问题 - 如果完整的代码如下所示，我能够让代码工作：

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

class App extends Component {
  render() {
    return (
      <div className="container w-50">
        <div className="row">
            <button>
              <FontAwesomeIcon
                icon={faHeart}
                size="2x"
                className={`transform motion-safe:group-focus:scale-110 p-1.5 z-10`}
                aria-hidden="true"
              />
            </button>
        </div>
      </div>
    );
  }
}

export default App;

https://codesandbox.io/s/react-fontawesome-forked-moi0x5?file=/src/page/App.js

Answer 2

谢谢大家的回答，但我找到了问题。

我显然遗漏了一些配置，最新版本打破了这一切。

这些需要添加到我的 _app.tsx (documentation)

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

Fontawesome 图标在按钮元素内时隐藏

Fontawesome icon is hidden when inside a button element

font-awesome

reactjs

next.js

react-font-awesome