Font Awesome Not Working, Icons Showing as Squares

Font Awesome not working, icons showing as squares

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

Font Awesome not working, icons showing as squares

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

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!

Font awesome fonts are not loading, showing squares in HTML

The original website does not use CDN, it uses a package of font-awesome.

Its ask for .woff and .ttf files, you can add it with the below solution.

download zip from font-awesome (free for web)

https://fontawesome.com/download

when you get the zip, extract it and now you get too many files, from that you need one folder webfonts and one file all.min.css or all.css.

now link all.min.css or all.css with your HTML file and put your folder to the exact previous location of you all.min.css or all.css, I will give a sample folder structure to know what I mean by this line.

SAMPLE FOLDER STRUCTURE

assets
   |-- css
   |    | -- all.min.css
   |-- webfonts

FontAwesome icons are not showing, Why? (Font-awesome/4.2.0)

I managed to reproduce your problem by running the code you gave directly, locally in my browser.

The SO snippet system does add things (like doctype, body element if it's not there already etc) to the code so something was being done that allowed the FA icons to load in the snippet system but not in the raw code locally. (I don't know what, hopefully someone will explain).

Anyway, locally you can see the file not loading if you go into dev tools inspect facility.

When I added https: to the front of the url it did load and the icons showed up fine. So use this:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Some font-awesome icons are not working, but others do

They have some premium icons which will not appear with the free plans. You should filter on "free".

https://i.stack.imgur.com/VeGOl.png.

---

Related Topics