字体真棒图标在Chrome中显示为正方形? [英] Font awesome icon showing as square in chrome?

问题描述

我正在尝试在按钮内使用字体令人讨厌的图标.该图标在Firefox中工作正常，但是当我在chrome中使用时，它显示为正方形.我环顾四周，我发现的唯一发现是字体的路径可能不正确，但是我此后尝试了cdn版本

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.

我还尝试在计算机上的静态html文件中使用相同的样式表，效果很好.

Also I have tried the same stylesheets in a static html file on my computer it is working fine.

以下是所使用的html的示例:

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>

该Web应用程序也是使用Rails构建的，并且正在使用引导程序作为模板.

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.

在真棒字体"中，必须将字体文件放置在" fonts "目录中，而不是先前版本中的" font "目录中.

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

这篇关于字体真棒图标在Chrome中显示为正方形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！