Font Awesome v6 ::before伪元素内图标无法正确对齐求助

问题现象 #

• 使用Font Awesome v6版本时，常规图标可正常渲染，但::before伪元素内的图标出现对齐异常
• 具体表现：图标显示在伪元素生成的圆形背景后方，图标预期位置显示缺图占位框，但图标资源实际已加载完成，不属于资源缺失问题
• 问题效果参考：问题异常截图
• 可复现代码参考：JSFiddle复现案例

已知前置场景 #

• 此前使用Font Awesome伪元素自定义标准ul列表项目符号时功能完全正常
• 本次实现唯一差异是使用:nth-of-type()选择器匹配元素
• 实测只要content属性填入的内容不是Font Awesome图标unicode，其他任意文本、符号都可正常显示

已尝试无效方案 #

• 在浏览器元素检查面板中调整所有position、display相关属性，均无法实现正确定位
• 手动修改Font Awesome库自动注入的svg元素可生效，但操作繁琐无法批量落地
• 检索到的公开解决方案均为解决图标无法加载的基础问题，与当前对齐异常场景不匹配

可行修复方案 #

方案1：切换为WebFont渲染模式（推荐，适配原有写法） #

该异常90%以上是因为默认引入的Font Awesome资源启用了SVG+JS自动注入模式，该模式下伪元素渲染逻辑和WebFont模式差异极大，和结构伪类选择器一起使用时极易出现定位、层级、字符映射异常。
直接替换资源引入方式即可，原有伪元素写法、自定义列表符号的逻辑不需要做任何调整：

<!-- 移除页面中原来引入的 all.js 文件，替换为WebFont版本的CSS资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">

切换后:nth-of-type()选择器不会影响图标渲染，对齐、层级问题会直接消失。

方案2：保留SVG+JS模式，补充配置修正 #

如果项目必须依赖SVG自动注入的能力，按以下两步调整：

1. 在加载Font Awesome JS文件前添加全局配置，开启伪元素扫描能力：

   <script>
     window.FontAwesomeConfig = {
       searchPseudoElements: true
     }
   </script>
   <!-- 配置加载完成后再引入FA的JS文件 -->
   <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/js/all.min.js"></script>
   

2. 给伪元素样式补充必要属性，避免自动注入的SVG元素层级覆盖：

   /* 替换为你的实际选择器 */
   .target-element:nth-of-type(n)::before {
     /* 保留原有content、宽高、圆角、背景色、定位等样式，补充以下属性 */
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     display: inline-block;
     z-index: 1;
   }
   

   注意：如果使用的是品牌类图标，需要将font-family属性值替换为"Font Awesome 6 Brands"；实心图标必须设置font-weight: 900，常规线性图标设置font-weight: 400，否则图标不会正常渲染

方案3：规避选择器冲突 #

如果以上调整后仍有偶发占位框问题，把:nth-of-type()结构伪类选择器替换为静态类名选择器匹配目标元素即可。部分浏览器在SVG+JS模式下，会出现动态生成内容和结构伪类的样式计算时序问题，导致FA的图标unicode字符映射失效，换成静态类名可直接规避该问题。

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