带有aria-hidden的首图标渲染失败时如何仅显示第二个span元素

方案1：JavaScript 检测方案（兼容性最优，支持动态类名） #

该方案不限制图标类名规则，无论是Font Awesome还是其他自定义字体图标都可适配，兼容所有主流浏览器：

1. 首先修改HTML结构，给图标和 fallback 文本加统一父容器、给 fallback 文本加标识类：

<p class="icon-wrapper">
  <!-- 动态类名的图标span保持不变 -->
  <span class="star" aria-hidden="true"></span>
  <span class="icon-fallback">Favorite</span>
</p>

2. 新增CSS规则默认隐藏 fallback 文本，原有样式保持不变：

.icon-fallback {
  display: none;
}
/* 原有样式保持不变 */
.star:before {
  content: "f";
}
span.star { 
  color:purple;
  background:white;
  font-size:3em;
  padding-left:0.2em;
}
p>span+span {
  font-family:sans-serif;
  font-size:1.1em;
  display:block;
  padding-left:0.2em;
} 

3. 加入JS检测逻辑，页面加载完成后自动判断图标是否渲染成功：

window.addEventListener('load', () => {
  const iconWrappers = document.querySelectorAll('.icon-wrapper');
  iconWrappers.forEach(wrapper => {
    const iconEl = wrapper.querySelector('[aria-hidden="true"]');
    const fallbackEl = wrapper.querySelector('.icon-fallback');
    if (!iconEl || !fallbackEl) return;

    // 获取图标伪元素的渲染内容
    const computedStyle = getComputedStyle(iconEl, '::before');
    const iconContent = computedStyle.content.replace(/"/g, '');
    // 创建临时元素用系统默认字体渲染相同内容，对比宽度判断字体是否加载成功
    const tempEl = document.createElement('span');
    tempEl.style.fontFamily = 'system-ui, sans-serif';
    tempEl.style.fontSize = computedStyle.fontSize;
    tempEl.style.visibility = 'hidden';
    tempEl.style.position = 'absolute';
    tempEl.textContent = iconContent;
    document.body.appendChild(tempEl);
    const defaultFontWidth = tempEl.offsetWidth;
    document.body.removeChild(tempEl);

    // 宽度差小于2px说明图标字体未加载，显示 fallback 文本
    if (Math.abs(iconEl.offsetWidth - defaultFontWidth) < 2) {
      fallbackEl.style.display = 'block';
    }
  });
});

方案2：纯CSS方案（适用于高版本浏览器、已知图标字体名称场景） #

如果你的业务不需要兼容低版本浏览器，且使用的是固定名称的图标字体（比如Font Awesome），可以用更简洁的纯CSS实现：

/* 默认隐藏 fallback */
.icon-fallback {
  display: none;
}
/* 把下面的Font Awesome 6 Free替换为你实际使用的图标字体名称 */
@font-face {
  font-family: 'IconDetect';
  src: local('Font Awesome 6 Free');
  unicode-range: U+E000-F8FF; /* 匹配PUA私用域字符，也就是图标字体的字符范围 */
}
/* 当图标元素使用的不是目标图标字体时，显示 fallback */
.icon-wrapper [aria-hidden="true"]:first-child:not(:font-family: IconDetect) + .icon-fallback {
  display: block;
}

注意：该方案用到的:font-family()伪类属于CSS Fonts Module Level 4特性，2024年主流浏览器覆盖率约87%，需根据业务兼容性要求选择。

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