Font Awesome 5免费版fa-heart-o不生效及版本共存问题咨询

你的代码渲染失败核心原因是类名写法不符合FA5的规则，按以下点排查修正即可：

• 类名和样式前缀不匹配：FA5彻底调整了4.x版本的类命名规则，4.x版本的fa-heart-o（空心心形）在FA5免费版中对应的正确类组合是far fa-heart——其中far是Regular（空心常规）样式的前缀，fa-heart是更新后的图标名。你代码里写的fas fa-heart-o存在两个错误：一是fas是Solid（实心）样式的前缀，该样式集下根本没有空心心形图标；二是fa-heart-o是4.x的旧命名，FA5原生类名里已经废弃了带-o后缀的空心图标命名规则。
• 资源引入时序问题：你当前把FA的kit脚本放在了图标DOM节点的后面，虽然kit默认会扫描已加载的DOM节点渲染图标，但如果页面有其他提前执行的脚本操作DOM，很容易出现图标漏渲染的问题，建议把script引入标签移到<head>标签内。
• 资源加载拦截排查：打开浏览器开发者工具的网络面板，检查FA相关的资源请求是否被广告拦截插件、页面CSP安全规则拦截，确认资源返回状态为200即可。

技术上可以通过自定义命名空间隔离两个版本的类名实现，但极度不推荐：

• 两个版本默认共用大量全局类名，不做隔离直接引入会出现样式覆盖、图标显示错乱的问题，同时加载两个版本的图标资源也会额外增加页面体积，拖慢加载速度。
• 配置命名空间隔离的操作成本很高，后续迭代维护很容易出现兼容性问题。
• 你需要的空心心形图标在FA5免费版中原生支持，根本不需要额外引入4.7版本，直接使用far fa-heart即可实现和4.xfa-heart-o完全一致的效果。

修正后的可正常运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>
<body>
    <li>
        <i class="far fa-heart"></i>
    </li>
</body>
</html>

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