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?

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?

• icon
• fonts

• 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

1 Answer 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:

1. Modify your css

   .fa{ font-family: 'font-awesome'; font: normal normal normal 14px/1 }

2. Use a other icon font

3. Make sure you call the Unicode character: f0e4

I hope this will help you.