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 that I found was that the paths to the fonts may not be right however I have since tried the cdn version here and it is still working in firefox but not in chrome.
Also I have tried the same stylesheets in a static html file on my computer it is working fine.
Here is an example of the html being used:
<a id="btnLogin" href="url.com" class="btn btn-primary btn-large disabled">
<i class="icon-refresh icon-white"></i>
Sign in using Facebook
</a>
And also the web app is built with rails and is using bootstrap for the templates.
Any ideas as to what could be causing this?
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.
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!
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
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.
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.
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!
