Having so much trouble with font-awesome

I was having trouble with this icon:
https://fontawesome.com/icons/heart?style=solid

until I read on another FCC forum posting that removing the “s” from className can solve the problem. I did that, and it worked and I continued on my merry way. (Although I am confused about why font-awesome is giving the incorrect class…?)

However, I also need this icon:
https://fontawesome.com/icons/heart?style=regular

Using it as is did not work. And there is no “s” to remove from className.

Any help would be appreciated. Link to my code is below. Thank you.

Codesanbox file: https://codesandbox.io/s/vjnw0r2m37?fontsize=14

That’s because you’re using v4 of font-awesome, but icon names from v5.
If you definitely want to use v4, then add to <head> in public/index.html:

<script src="https://use.fontawesome.com/29dc07170c.js"></script>

Remove font-awesome from src/index.js
And replace icon with:

<i className="fa fa-heart-o" aria-hidden="true" />

Working example: https://codesandbox.io/s/0xnkon5y2l

But I suggest you to switch to v5 (https://fontawesome.com/how-to-use/on-the-web/using-with/react)

1 Like

Thanks @jenovs - super helpful !

And another helpful doc - as far as understanding how to import regular vs solid versions of same icons - in case anyone finds it helpful: https://www.npmjs.com/package/@fortawesome/react-fontawesome.