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 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?

Answer 1

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.