Font-awesome: font-awesome doesn't work with React.js, Google Chrome for Linux - SOLVED

[nguyendviet]

Font-awesome icons (e.g. fa-times-circle, fa-shopping-cart...) show up as blocks on Google Chrome for Linux (Ubuntu).
Some icons do appear correctly on FireFox for Linux (Ubuntu) but some don't.

This issues happens with HTML and JSX (React), using font awesome CDN, link to downloaded files or import in React.

I wasn't able to find a correct answer anywhere (stackoverflow, ect)

Example:
The body of a bootstrap 4 starter template:
<h1>Hello, world!<i class="fas fa-shopping-cart"></i><i class="fas fa-times-circle"></i></h1>
Result on FireFox (Ubuntu): https://drive.google.com/file/d/14HgVnUSlzox7cd7HLWAuhLGo-vwgD897/view?usp=sharing
Result on Google Chrome (Ubuntu): https://drive.google.com/file/d/1VGZbvJfa9Y-UBjjZZ5DkteXJF5s-2DuB/view?usp=sharing

[robmadole]

Can you please share an example that reproduces the issue you are seeing?

What we'd recommend is using a site like codepen.io, jsfiddle.net, jsbin.com, or codesandbox.io (which is great if you are dealing with NPM packages).

We'll re-open this issue as soon as you can provide this (we close them to keep the issues queue as manageable as possible).

[nguyendviet]

Thanks, Rob. Please look at the example here on a Linux machine: https://jsfiddle.net/vietdnguyen/ua5ns9xw/

It shows 2 rectangles instead of the icons: https://drive.google.com/file/d/1Ddtq5jyYmRhsf5ihXl4nEnfW_L4fB8lq/view?usp=sharing

[tagliala]

Hi,

you are using font awesome 4.7.0, which requires fa instead of fas

Please update your head tag: https://jsfiddle.net/tagliala/ua5ns9xw/1/

(or use old fa syntax)

Hope it helps

Ref: https://fontawesome.com/how-to-use/upgrading-from-4#icon-name-changes

[nguyendviet]

Thank you, Geremia! It definitely helps.

[munawarali]

Thanks @tagliala it helped me...