Fontawesome CDN自动将<i>标签转为<svg>，如何阻止该行为？

你遇到的这个情况是Fontawesome默认的JavaScript行为——它会自动把<i>形式的图标标签替换成<svg>，以此提供更优的渲染效果和功能支持。不过确实有几种方法可以阻止这个转换：

方法1：使用纯CSS字体图标（不加载Fontawesome JS） #

如果不需要SVG图标特有的交互功能或动态特性，直接引入Fontawesome的CSS文件即可，这样不会有JS来执行标签替换。

替换你的JS引入为纯CSS链接：

<!-- 替换之前带JS的CDN链接 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">

此时<i class="fa-solid fa-user"></i>会直接作为字体图标渲染，不会被转换为<svg>。

方法2：全局配置禁用自动替换 #

如果仍需要使用Fontawesome的JS功能（比如图标动画、动态修改等），可以在加载JS前设置全局配置，关闭自动替换：

<!-- 先设置配置 -->
<script>
  window.FontAwesomeConfig = {
    autoReplaceSvg: false
  };
</script>
<!-- 再加载Fontawesome JS -->
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/js/all.min.js"></script>

这个配置会全局阻止所有<i>标签被替换为<svg>。

方法3：局部阻止单个标签替换 #

如果只想保留部分<i>标签不被转换，可以给目标标签添加data-fa-no-auto-replace属性：

<i class="fa-solid fa-user" data-fa-no-auto-replace></i>

这样这个特定的图标会保持<i>标签形式，其他图标仍会正常转换为<svg>。

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