Bulma: Icons do no show up with React or Gatsby

[omrllm]

This is about using icons

Overview of the problem

I'm using Bulma version [0.7.4]
My browser is: Brave

Description

When I try to add any icon it doesn't show up, for example I tried to add:

<span className="icon">
  <i className="fas fa-home"></i>
</span>

to App.js but nothing happens; at best I get some space, but that's it.

Steps to Reproduce

• npx create-react-app folderName
• cd folderName
• npm install bulma
• Add import 'bulma/css/bulma.css'; to the interested file
• Try to add any icon

Expected behavior

A font awesome icon should appear.

Actual behavior

Nothing appears.

P.S. Should I install any package other than Bulma to use icons or anything else missing with npm install bulma && React?

[borxes]

Have you included Font Awesome per the docs?

If you want to use icons with Bulma, don't forget to include Font Awesome 5:
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

[omrllm]

So npm install bulma doesn't install font awesome by default?
Is there an official package or something for that?

[borxes]

As the documentation states, Bulma doesn't install Font awesome or any other icons, so you should add that script yourself. In Gatsby, you would probably add this to layout.js or seo.js component.

[omrllm]

For anyone having this issue look at react-fontawesome, that should solve the problem.