Font Awesome Icons only squares

admin管理员组

文章数量:1394099

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

Share Improve this question asked Mar 6, 2020 at 12:41 HaidepzaiHaidepzai 10111 bronze badge 3

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： Font Awesome Icons only squares