twitter-bootstrap 字体真棒图标在 chrome 中显示为正方形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15805978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font awesome icon showing as square in chrome?
提问by startupsmith
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 hereand it is still working in firefox but not in chrome.
我正在尝试在按钮中使用字体很棒的图标。该图标在 Firefox 中工作正常，但是当我在 chrome 中使用它时，它显示为一个正方形。我环顾四周，唯一发现的是字体的路径可能不正确，但是我已经在这里尝试了 cdn 版本，它仍然可以在 Firefox 中运行，但不能在 chrome 中运行。
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:
这是正在使用的 html 的示例：
<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.
并且 Web 应用程序是用 Rails 构建的，并且使用引导程序作为模板。
Any ideas as to what could be causing this?
关于可能导致这种情况的任何想法？
回答by Michal
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.
在 Font Awesome 中，字体文件必须放在“ fonts”目录中，而不是以前版本中的“ font”目录中。
回答by Armfoot
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:
如果您将所有内容都放在正确的位置（并且您甚至检查了 css 以确保路径正确，并且您想知道是否需要 js 文件），请尝试查看您的 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 faclass!
这将显示您的图标！请记住，在 4.2.0 版本中您必须添加fa类！
Hope it helps!
希望能帮助到你！
回答by tracyak13
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:
上面的答案是正确的，但我想进一步澄清，因为我认为在入门的字体真棒页面上不清楚。我添加了 min.css 样式表并在页面的头部部分链接到它。您还需要获取五个字体文件并将它们放在项目的“字体”文件夹中。应该有五个文件，它们将以：
.eot .svg .ttf .woff .otf
.eot .svg .ttf .woff .otf
I retrieved the files from github here: https://github.com/FortAwesome/Font-Awesome
我在这里从 github 检索文件：https: //github.com/FortAwesome/Font-Awesome
回答by Joe Cheng
I have the same problem and finally I'd found what the problem is. It's because I have override the font-familyof the tag <i>to something else.
我有同样的问题，最后我找到了问题所在。这是因为我已将font-family标签的覆盖<i>为其他内容。
回答by Albert
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.
我发现这种行为是通过没有 display: block; 解决的。在 i/.fa 元素上。
.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.
.fa 是标准的内联块，但我将其更改为块以更好地兼容旧浏览器，但它必须是内联块或其他类似的东西。
Hope it helps someone out there!
希望它可以帮助那里的人！
回答by Awilson089
For me this issue was due to a stray number 4 in one of my CSS files.
对我来说，这个问题是由于我的一个 CSS 文件中的一个流浪数字 4 造成的。
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.
我正在拔头发并使用所有的修复方法都无济于事，但是在打开一个完全不相关的 CSS 文件并找到文档末尾的数字 4 并将其删除后，它运行良好。
So check every CSS file for stray characters.
因此，请检查每个 CSS 文件中是否有杂散字符。
