Font Awesome Icons only squares

Question

I have a problem with the icons of font awesome. They are showing, though not all. Some icons just show a square and I don’t know how to fix it.

So this is how it looks like:

If I go to the console and remove the tick on “font” and “font-family” it will appear again correctly. I can’t understand why

So how can I delete these properties?

Are you loading in 2 versions of FA? Check the page source and see. — RiddleMeThis, Commented Mar 6, 2020 at 13:54
No just one. For some reason I could fixed it by insert a custom CSS code: .fa.fa-dashboard:before { content: "\f3fd" !important; } but I have no clue why it works... — Haidepzai, Commented Mar 6, 2020 at 14:13
Check what version you are using and make sure your only using icons from the version. — RiddleMeThis, Commented Mar 6, 2020 at 14:14

Rémi B. LOIZEAU · Accepted Answer · 2020-03-07 22:53:10Z

1

In typography, a square appears when you ask for a character that is not included in the font.

By adding the property !important to font-family:, your naviagator is obliged to use Font Awesome.

Look carefully at your two screenshots. Neither of the icons is identical.

Some solutions:

Modify your css

.fa{ font-family: 'font-awesome'; font: normal normal normal 14px/1 }
Use a other icon font
Make sure you call the Unicode character: f0e4

I hope this will help you.

answered Mar 7, 2020 at 22:53

Rémi B. LOIZEAU

311 bronze badge

Add a comment |

1 Answer 1