Font Awesome图标load事件监听失效问题求助

1. 修正选择器错误 #

你当前的选择器nav .key-icon svg存在问题：HTML里是<nav class="key-icon">，即key-icon是<nav>的类名，而非<nav>的子元素类名。正确的选择器应该是nav.key-icon svg（或者更精确的nav.key-icon i svg）。

2. 适配Font Awesome的渲染时机 #

Font Awesome会在页面加载后动态将<i>标签替换为SVG元素，而DOMContentLoaded事件触发时，这个替换过程可能还未完成，导致你无法获取到SVG元素，自然无法绑定load事件。针对这个问题，有两种可靠的解决方式：

方式一：监听Font Awesome初始化完成事件 #

Font Awesome提供了fontawesome:initialized事件，会在所有图标渲染完成后触发，此时可以安全地获取并操作SVG元素：

document.addEventListener('fontawesome:initialized', () => {
  const svg = document.querySelector('nav.key-icon i svg');
  if (svg) {
    // 若SVG已加载完成，直接执行逻辑
    if (svg.complete) {
      console.log('图标已加载');
    } else {
      // 绑定load事件处理未完成的情况
      svg.addEventListener('load', () => console.log('loaded'));
    }
  }
});

方式二：用MutationObserver监听DOM变化 #

通过监听<nav>节点的子元素变化，捕捉Font Awesome替换<i>为SVG的时机，再绑定事件：

document.addEventListener('DOMContentLoaded', () => {
  const iconNav = document.querySelector('nav.key-icon');
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      const svg = iconNav.querySelector('svg');
      if (svg) {
        svg.complete ? console.log('loaded') : svg.addEventListener('load', () => console.log('loaded'));
        observer.disconnect(); // 完成监听后断开，避免重复触发
      }
    });
  });
  // 监听节点的子元素变化
  observer.observe(iconNav, { childList: true });
});

3. 额外说明 #

如果你的Font Awesome是通过Web Font（而非SVG）模式加载的，那么不存在SVG元素，load事件也不适用，这种情况下可以监听document.fonts.ready事件，等待字体加载完成：

document.fonts.ready.then(() => {
  console.log('Font Awesome字体已加载');
});

内容的提问来源于stack exchange，提问作者João Pimentel Ferreira