Question

尝试在本地托管图标时，我得到空白方块而不是字体真棒图标。切换到CDN托管版本有效，但我似乎无法在本地提供这些版本。

这是我的FA css包括不起作用：

<link rel="stylesheet" href="/css/font-awesome-4.2.0/css/font-awesome.min.css">

这是CDN FA css包含确实有用

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

我确认此文件正在浏览器中正确加载并具有相应的标题：

Request Method:GET
Status Code:200 OK
Content-Type:text/css; charset=UTF-8

我正在尝试使用以下html / css的图标：

<a href="#"> <i class="fa fa-home"></i>Home </a>

我可以检查这个元素，应用的样式看起来是正确的：

.fa{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
}
....

.fa-home:before {
    content: "\f015";
}

字体文件本身似乎正确加载并使用正确的标题，我知道内容类型和CORS可能是一个问题，所以我仔细检查了这些：

Request Method:GET
Status Code:200 OK

Accept-Ranges:bytes
Access-Control-Allow-Origin:*
Cache-Control:public, max-age=0
Connection:keep-alive
Content-Length:65451
Content-Type:application/font-woff
Date:Wed, 12 Nov 2014 17:03:52 GMT
ETag:W/"ffab-105903352"
Last-Modified:Sun, 11 Nov 2014 17:31:23 GMT
X-Powered-By:Express

但仍然没有运气。再次，切换到包括CDN文件而不是在本地托管它们，它们渲染得很好。页面上的其他地方没有其他网络或控制台错误，所有内容都可以正确加载，但仍然会出现空白方块。使用nodejs＆amp;如果这很重要，请在本地服务器上表达4。

Answer 1

我尝试了很多方法，问题没有解决。然后我在样式表中找到了这个：

* {
    font-family: 'Open Sans', Arial, 'Microsoft YaHei' !important;
}

以及它的全部内容：！important ，删除它，一切正常。

Answer 2

以防万一，像我这样的其他人，在2018年的这个时候有这个问题。我有同样的问题，按照我使用本地服务器，我COPIED了字体文件夹（FontAwesome.otf，fontawesome.eot ... svg ... ttf ...等到测试服务器文件夹）（在Mac情况下为/ httdocs）。

请记住，如果您将主站点文件设置在另一个文件夹（第二个硬盘驱动器或外部驱动器）上，当您尝试测试您的php页面时它们看起来如何，这些文件将自动复制到测试服务器。但是......有些文件不会自动复制，比如样式和字体。我想，所有其他插件必须先在测试服务器中复制，以便在测试期间优化校正页面视图。

当然，您需要检查并在HTML文件中设置正确的路径。

字体令人敬畏的图标显示为本地服务器上的空白正方形

2 个答案: