React.js import font-awesome is not working with npm

Question

I want to use font-awesome in my project, after install this package via npm I want to import it into main component index.js.

import 'font-awesome/css/font-awesome.min.css';

I have tried to import scss instead of css and still not working.

Later I'm trying to use in some other components:

<i className='fas fa-heart' />

And I'm getting rectangles instead of heart icons.

I have used: npm i font-awesome to install

In console I have no errors. How to fix this ?? With CDN is working but I don't want to use this in index.html, I want to install it and import.

Try github.com/FortAwesome/react-fontawesome, it's specifically made for use with react — Velimir Tchatchevsky
– Velimir Tchatchevsky, Commented Jan 9, 2019 at 16:17
But how is that possible, that I'm teaching from course and on his pc is working on my not — Freestyle09
– Freestyle09, Commented Jan 9, 2019 at 16:18
Maybe you've imported an old version of font-awesome and maybe it works with className='fa fa-heart' instead of className='fas fa-heart'. Nothing else comes in my mind as the css are applied as expected in my apps — Mosè Raguzzini
– Mosè Raguzzini, Commented Jan 9, 2019 at 16:21
Looool... Why fa is working but they have fas in their documentation ?? — Freestyle09
– Freestyle09, Commented Jan 9, 2019 at 16:25
Yeah I see... I've installed 4.7.0 version with npm and on site is over 5.0.0... Many thanks for poiting me! — Freestyle09
– Freestyle09, Commented Jan 9, 2019 at 16:27

Andrés M. Jiménez · Accepted Answer · 2019-05-10 07:07:15Z

1

I saw your question and I had the same problem. I summary the comment in a answer:

font-awesome (https://www.npmjs.com/package/font-awesome) is a old non-official library. This version is v4.7.0.
@fortawesome (https://www.npmjs.com/package/@fortawesome/react-fontawesome) is the official repository for React Library.

In the other hand...

<i className='fas fa-heart' />

this HTML is for the actual version of font-awesome, because it uses fas despite of fa.

answered May 10, 2019 at 7:07

2984 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1