Adding margin to font awesome icon in React

Question

I use reactstrap in my project. I tried to add a margin to the font awesome icon in my react project, but it didn't work.

What am I missing?

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

Answer 1

className won't work on a component, it only works on DOM elements. Try wrapping FontAwesomeIcon in a div/span

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

Answer 2

I use the exact setup i-e reactstrap & react-fontawesome and this is what I use and it works perfect

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

PS: Note that <FontAwesomeIcon icon={faIcon} /> is a self closing tag, and i think this is were you are getting this wrong.