Font awesome is not showing icon

Question

I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead

Answer 1

For a start, you shouldn't have both font-awesome.css and font-awesome.min.css

Generally, use font-awesome.css during development, then switch to font-awesome.min.css once you're happy with the site.

Problems like this are often caused by relative paths and locations, so check where your html file is in relation to the css.

If your html file is in the base directory, and the css in a subfolder off the root, you would need: href="./css/font-awesome.css" (single period)

Answer 2

First, check that you have class="fa" as well as whatever the icon's class is. So, not just

<i class="fa-pencil" title="Edit"></i>

But also

<i class="fa fa-pencil" title="Edit"></i> 

Then it works as expected. This solved my issue.

Answer 3

I'm using FontAwesome Pro, and the solution for me was to embed all.min.css instead of fontawesome.min.css.

Answer 4

In my case, the problem was caused by using some regular styles (far) that are not included in the free set. Changing to fas fixed it.

Answer 5

On MacOS Mojave, I had this problem in Safari. The font-awesome images worked in Chrome but not in Safari, so I was sure it wasn't the site.

I got them to render by going to Preferences in the Safari menu, and disabling/unchecking "Prevent cross-site tracking" under the Privacy tab.

Not sure why this fixed it, but it did.

Answer 6

So it seems adding style='font-weight:normal;' or otherwise changing the font directly on the element overrides the .fas{font-weight:900} definition in Font Awesome's CSS file. I guess the font has specific defines within the font file that it works with. It seems the font-weight must be set between 501 and 1000, or the font may look like a square block.