Font Awesome 5.0.13部分图标在Chrome中不显示，如何解决？

嘿，我之前也碰到过Font Awesome旧版本在Chrome里的图标渲染问题，不用等新版本发布，试试下面这几个方案，大概率能搞定：

1. 先强制刷新浏览器缓存 #

有时候Chrome会缓存旧的CSS资源，导致图标加载异常。按下Ctrl + Shift + R（Windows/Linux）或者Cmd + Shift + R（Mac）强制刷新页面，彻底清除缓存后再看看图标能不能显示。

2. 调整图标类名，加上固定宽度标识 #

旧版本的Font Awesome里，部分品牌图标需要明确的样式提示才能正常渲染。你可以给Instagram的图标加上fa-fw类（固定宽度），试试修改代码：

<a href="#" target="_blank" class="icon-instagram">
  <i class="fab fa-instagram fa-fw"></i>
</a>

3. 切换到同系列更稳定的子版本 #

5.0.13确实存在一些Chrome下的图标兼容性bug，你可以降级到5.0.12或者直接升级到5.1.0+版本（这些版本修复了不少渲染问题）。比如把你的CDN链接替换成这个：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

4. 本地托管Font Awesome资源 #

如果CDN的缓存或者访问问题一直存在，不如把Font Awesome资源下载到本地托管：

• 去Font Awesome官网下载5.0.13的完整压缩包
• 解压后把css/all.css和webfonts文件夹放到你的项目目录里
• 修改链接为本地路径，比如：

<link rel="stylesheet" href="./assets/fontawesome/css/all.css">

这样能避免CDN带来的各种不确定性。

5. 检查Chrome的字体设置 #

最后确认下Chrome有没有禁用网页自定义字体：

• 打开Chrome设置 → 隐私和安全 → 网站设置 → 字体，确保“允许网站使用自己的字体”是开启状态。

内容的提问来源于stack exchange，提问作者Eyes don't Lie