Question

我在项目中使用 reactstrap 。我试图在我的react项目中的字体真棒图标上添加一个空白，但是没有用。

我想念什么？

<NavItem>
     <NavLink active href="/products"><FontAwesomeIcon className="mr-2" icon={faClone}></FontAwesomeIcon><span>Products</span></NavLink>
</NavItem>

Answer 1

className不适用于组件，它仅适用于DOM元素。尝试将fontAwesomeIcon包装在div / span中

<NavItem>
     <NavLink active href="/products"><div className="mr-2"><FontAwesomeIcon icon={faClone}></FontAwesomeIcon><span>Products</span><div></NavLink>
</NavItem>

Answer 2

我使用确切的设置，即 reactstrap 和 react-fontawesome ，这是我使用的并且效果很好

<button>
<FontAwesomeIcon icon={faPlus} className="mr-3" /> Add
</button>

PS：请注意，<FontAwesomeIcon icon={faIcon} />是一个自闭标签，我认为这是您误解了。

Answer 3

当您可以使用html代码时，为什么要使用Font Awesome Icon组件。只需添加

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

在index.js中。

在React中为字体真棒图标添加边距

3 个答案: