CSS伪元素::marker在iOS设备上不显示问题求助

问题根源在于iOS Safari对::marker伪元素的自定义字体支持存在限制——即使在电脑端和Chrome设备模拟中正常，真机上也无法识别通过content引入的Font Awesome图标字体，最终 fallback 到默认的圆圈标记。

以下是可行的修复方案：

方案1：用::before伪元素替代::marker #

这是兼容性最好的方案，::before在iOS Safari上对自定义字体的支持更稳定：

.className ul li {
  position: relative;
  padding-left: 28px; /* 为图标预留空间 */
  list-style: none; /* 移除默认列表标记 */
}

.className ul li::before {
  content: "\f064";
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
  color: var(--heading);
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 让图标和文字垂直居中对齐 */
}

HTML部分无需修改，保持原结构即可。

辅助排查：确认Font Awesome字体加载 #

如果想进一步排查原方案的问题，可以检查iOS真机的字体加载情况：

• 打开Safari开发者工具，查看网络请求中Font Awesome的字体文件（如fa-solid-900.woff2）是否成功加载
• 若CDN加载存在缓存或跨域问题，可尝试将字体文件本地托管，避免加载异常

不过方案1的兼容性和稳定性远优于直接使用::marker，更推荐采用。

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