Font-Awesome icons showing up as square boxes

Had the same problem, where some of the icons showing up as square boxes.

it only happened with a local reference of font awesome to my web app.

when i investigate the URL, i saw that there was also web fonts that needed to be loaded (not only the css file itself):

and than save the web fonts with right click - open new tab:

and move those files into your web-fonts folder. (in my case, i had to overwrite the existing webfonts - this is why it show the square boxes in first place).

and the problem solved!

After reading the answers on this page, I got my own code working by linking to the CDN per other suggestions. What I actually wanted, though, was to add the Font Awesome folder to my project and link to the project file. When I studied the link to the CDN, I noticed that it used a path ending with css/all.css. I noticed that the folder I had downloaded and unzipped included an all.css file along with the fontawesome.css file, which seems to be a change as of -v 5.0. I changed my link from:

<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css"> 

to:

<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">

And it worked.

I also learned the hard way that the Font Awesome link must be placed above the link to the main.css file for the project.