字体真棒图标在本地服务器上显示为空白方块

Posted 2023-03-06

【中文标题】字体真棒图标在本地服务器上显示为空白方块

【英文标题】：Font awesome icons displaying as blank squares on local server

【发布时间】：2015-01-09 16:03:21

【问题描述】：

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

这是我的 FA css include 不起作用：

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

这里是 CDN FA css include 确实有效

<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 & express 4。

【参考方案1】：

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

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

就是这样：!important， 删除它，一切正常。

【讨论】：

感谢您的信息，但我不在任何地方使用 !important。我放弃了 font awesome，因为我无法解决这个问题。

也许下次你尝试的时候，检查一下 computed 上的样式。我认为这会有所帮助。

【参考方案2】：

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

请记住，如果您将主站点文件设置在不同的文件夹（第二个硬盘驱动器或外部驱动器）上，当您尝试测试 php 页面的外观时，这些文件将自动复制到测试服务器.但是...某些文件不会自动复制，例如样式和字体。我想，所有额外的插件都必须事先在测试服务器中复制，以优化测试期间正确的页面视图。

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