Font awesome icon doesn't work with React

[josesaranda]

I have a React application. To enable Font Awesome icon i added, before use L.easyButton, import 'font-awesome/css/font-awesome.min.css'; but it doesn't work.

It seems to be an incompatibility of Font Awesome with React. Did you try to use your library with React?

[atstp]

could you share a bit more about your situation?

some good stuff to see would be:

• explanations of your attempts to solve this on your own
• the exact error messages you're seeing
• a minimal, running example that shows your error (see here)
• the versions of the various libraries you're using

[josesaranda]

Thanks for your reply. This was exactly what i did:

...

import * as L from 'leaflet';
import 'leaflet-draw';
import 'leaflet-draw/dist/leaflet.draw.css';
import 'leaflet-draw/dist/leaflet.draw-src.css';
import 'leaflet-easybutton';
import 'leaflet-easybutton/src/easy-button.css';

...

L.easyButton('fa-trash',() => {
            // clear layer on new layer
            this.clearLayer(map);
}).addTo(map);

But it shows like corrupted icon.

[atstp]

is font awesome installed and imported?

[josesaranda]

Yes and yes

[atstp]

gotcha.

Did you check the existing issues?

there's this one that mentions some issues with recent versions of Font Awesome. Does that issue line up with your experience?

[josesaranda]

Yes is the same issue!