Font Awesome CSS content伪元素图标在移动端无法渲染问题求助

下面是旧版Font Awesome中可以正常工作的基础示例代码：

CSS 样式 #

ul { list-style: none; }
li:before { 
  content: '\f105'; /* Font Awesome图标的Unicode编码 */
  font-family: 'FontAwesome'; 
  margin-right: 1rem; 
}

HTML 结构 #

<ul>
<li>Item</li>
<li>Another item</li>
<li>Yet another item</li>
</ul>

已知问题说明 #

这个实现方式在旧版Font Awesome中能稳定渲染图标，但在当前的新版本Font Awesome里，这种写法在所有移动设备上都无法正常显示图标。

这主要是因为新版Font Awesome调整了字体加载逻辑、字体族命名规则（比如现在的字体族名可能是"Font Awesome 6 Free"这类带版本标识的名称），同时移动端的字体渲染策略对未正确声明字体权重的情况更敏感。如果要在新版中实现相同效果，需要更新代码，比如：

li:before { 
  content: '\f105'; 
  font-family: "Font Awesome 6 Free"; /* 对应新版字体族名 */
  font-weight: 900; /* 必须指定权重，否则图标无法正常渲染 */
  margin-right: 1rem; 
}

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