Font awesome icon showing as square in chrome?

Question

I am trying to use a font-awsome icon within a button. The icon works fine in firefox but when I use it in chrome it appears as a square. I have looked around and the only thing

Answer 1

If you have everything in the proper place (and you even checked the css to make sure the paths are right and you're wondering if you need a js file), try looking at your HTML:

 <i class="fa-users"></i>

This will show up the square with numbers/letters inside mentioned in the question (instead of the icon).

 <i class="fa fa-users"></i>

This will show your icon! Remember, in version 4.2.0 you have to add the fa class!

Hope it helps!

Answer 2

The above answer is correct but I wanted to clarify one step further because I don't think it's clear on the font awesome page for getting started. I added the min.css stylesheet and linked to it in the head section of my page. You'll also need to get the five font files and put them in your "fonts" folder of your project. There should be five files and they will end in:

.eot .svg .ttf .woff .otf

I retrieved the files from github here: https://github.com/FortAwesome/Font-Awesome

Answer 3

I have the same problem and finally I'd found what the problem is. It's because I have override the font-family of the tag <i> to something else.

Answer 4

I had the same issue. But I fixed it easly.

In Font Awesome fonts files must be placed in "fonts" directory instead of "font" directory in previous versions.

Answer 5

Very late answer but this might help another brother out there!

I found out that this behaviour was solved by NOT having display: block; on the i/.fa element.

.fa is standard inline-block but I changed it to block for better compatibility for old browsers, but it has to be inline-block or maybe something else similar.

Hope it helps someone out there!

Answer 6

For me this issue was due to a stray number 4 in one of my CSS files.

I was pulling my hair out and used all the fixes dotted around to no avail, but after opening a completely unrelated CSS file and finding the number 4 at the end of the document and removing it it worked perfectly.

So check every CSS file for stray characters.