Chrome浏览器无法显示Font Awesome图标问题排查求助

首先看你贴出的代码，发现一个小细节：你的<i>标签里多了个多余的icon类——Font Awesome 5的图标类写法是[样式前缀] fa-[图标名]，比如far fa-gem就足够了，额外加的icon类可能会干扰图标样式的渲染，先把它去掉，改成：

<i class="far fa-gem"></i>

如果修改后还是没解决，结合你描述的「其他浏览器正常、无广告拦截扩展、朋友设备没问题」这些情况，咱们可以按下面的步骤逐一排查：

• 清除Chrome的缓存和站点数据：Chrome有时候会缓存旧资源，导致新的Font Awesome文件加载异常。你可以打开Chrome设置→隐私和安全→清除浏览数据，勾选「缓存的图片和文件」以及「Cookie和其他网站数据」，清除后重启浏览器再测试。
• 检查Chrome的字体设置：有些自定义字体设置可能会覆盖Font Awesome的图标字体。进入Chrome设置→外观→自定义字体，把标准字体恢复成默认设置（比如Arial或系统默认字体），再看看图标能不能显示。
• 测试CDN资源的可访问性：直接在Chrome地址栏打开https://use.fontawesome.com/releases/v5.8.2/css/all.css，确认样式文件能正常加载；再打开https://use.fontawesome.com/releases/v5.8.2/webfonts/fa-regular-400.woff2（这是far类图标对应的字体文件），看看能不能正常下载。如果加载失败，大概率是你的网络环境对这个CDN有限制，试试切换成手机热点这类其他网络再测试。
• 关闭Chrome的硬件加速：硬件加速偶尔会导致渲染异常。打开Chrome设置→系统，关掉「使用硬件加速模式（如果可用）」，重启浏览器后再试。
• 检查系统字体状态：Font Awesome的图标依赖它的自定义字体，如果你的系统里相关字体损坏或者无法被Chrome读取，也会出问题。可以试试本地引入Font Awesome的文件（而不是用CDN），或者重新安装Font Awesome的字体包。

另外提一句，你用的Chrome 74.0.3729.169版本实在太旧了，现在最新版都到100+了，旧版本可能存在和新版Font Awesome的兼容问题，优先升级到最新稳定版应该能解决不少潜在问题。

内容的提问来源于stack exchange，提问作者Chetan Kumar