Font Awesome刷新按钮在jQuery UI Tabs中不显示问题排查

原因 #

你使用的Font Awesome data-auto-replace-svg="nest"模式仅会在页面初始加载阶段将DOM中已存在的<i>标签替换为SVG元素。但进度条完成后，刷新按钮的<i class="fas fa-sync-alt"></i>是动态添加到DOM中的，Font Awesome不会自动处理后续新增的这类元素，导致图标无法渲染显示。

解决方案 #

在动态添加刷新按钮的代码之后，手动调用Font Awesome的dom.i2svg()方法，强制将新插入的<i>标签转换为SVG。

修改你的timerComplete函数，添加调用代码：

function timerComplete() {
  clearInterval(timer);
  timer = null;
  $('#progressbar').progressbar('value', 0);
  $('#playPauseBtn').html('<i class="fas fa-sync-alt"></i>').off().on('click', function() {
    startTimer();
  });
  // 手动触发Font Awesome的SVG替换
  window.FontAwesome.dom.i2svg();
}

这样，当刷新按钮的<i>标签被动态插入后，dom.i2svg()会扫描DOM并将其替换为对应的SVG图标，就能正常显示了。

另外，也可以直接在动态创建时使用Font Awesome的SVG代码，避免依赖自动替换逻辑，比如：

$('#playPauseBtn').html('<svg class="svg-inline--fa fa-sync-alt fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sync-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 256 80C149.1 80 64 165.1 64 272c0 12.97 1.06 25.68 3.08 38.05L67.5 360H168c13.3 0 24 10.7 24 24s-10.7 24-24 24H56c-13.3 0-24-10.7-24-24V288c0-119.1 96.9-216 216-216a247.38 247.38 0 0 1 165.22 60.92l-78.38-3.77c-15.79-.75-30.23 10.07-33.22 25.62s5.7 30.9 21.5 33.2l104.45 5c16.43.77 30.42-10.8 33.52-26.94C509.37 44.19 386.91-14.23 256 16c-35.53 6.13-68.83 19.78-98.14 39.63l16.63 86.55c19.14-12.82 40.54-22.65 63.51-27.97C310.49 101.56 384 165.08 384 272c0 106.04-85.96 192-192 192S0 378.04 0 272 85.96 80 192 80a246.93 246.93 0 0 1 148.21 45.61l-16.63-86.55C238.36 14.91 247.05 8 256 8c113.03 0 212.69 53.81 275.18 138.71-11.12 20.8-30.67 35.11-53.63 38.4l-80.9 15.63c-17.4 3.34-31.66-11.62-28.32-29l78.9-15.2c11.18-2.15 19.29-12.12 19.29-23.61V12.57c0-6.63-5.36-12-12-12h-64c-6.64 0-12 5.37-12 12z"></path></svg>').off().on('click', function() {
  startTimer();
});

这种方式不需要依赖Font Awesome的JS替换逻辑，图标也能直接显示。

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