font-awesome只显示个红框不显示图标

在使用font-awesome有时候遇到，图标突然不见了，只显示个空心的框框。一般烂瘀佐栾这种情况都是因为font-awesome的字体文件没有加载成功导致的。常见的情况：1.字体文件放在网络上，网络问题导致没加载出来。2.字体文件放在本地，路径却写错了，导致无法正常加载。3.本地的字体文件内容为空导致图标不显示。

工具/原料

phpstorm

浏览器

网络上面导致无法显示

1、这种问题一般很少见到，可以把cdn选择一个稳定点的，具体哪个在这里不推荐。还有一种情况可能是dns解析导致的无法正常加载字体。这种情况跟用户使用的网络有关系，跟程序无关。在命令行里面有一个可以查看解析的命令：nslookup + 你要测试的域名比如下面这个测试百度域名解析的例子，可以看到是正常解析到了地址。如果dns异常，会发生无法解析出正确地址，访问服务器资源失败。这种情况的解决办法：更换稳定的dns。

文件路径错误

1、当配置路径的时候要注意一下目录结构，如果拿捏不准可以把字体文件链接和css链接放到浏览器去看下，能正常访问说明是对的。

本地字体文件异常导致不显示

1、这也是我今天遇到的情况。我发现之前的显示都是好的，最近发现不能显示了，文件路径都没错，字体文件都在，表面上看上去一点问题都没有。当我打开字体文件时候，发现有5个字体文件大小是0。

2、发现问题就解决问题，去font-awesome官网重新下载一份字体文件覆盖。

3、再刷新一下项目网页，小星星回来了。^_^