动态使用 Font-awesome 图标不适用于 SVG 和 JS 实现答案

【问题标题】：Using Font-awesome icons dynamically does not work with the SVG & JS implementation动态使用 Font-awesome 图标不适用于 SVG 和 JS 实现
【发布时间】：2018-10-09 21:57:43
【问题描述】：

所以我在他们的 v5 图标上使用了 font-awesome 的新 JS&SVG 实现。对于页面加载时 DOM 中存在的图标（例如 <i class='fas fa-home'></i>），该实现工作正常，并且 <i> 标签被替换为 <svg> 标签。

当我在某些 HTML 服务器端加载并将其插入 DOM 时出现问题，<i> 标签未转换，因此不显示图标。我找不到可以在我的 JS 中使用的任何方法（例如在将内容添加到 DOM 之后）来“重新实例化”JS 实现以将 SVG 图标加载到位。

有人遇到过这个问题吗？

【问题讨论】：

标签： javascript ajax svg font-awesome

【解决方案1】：

我就是这样使用它，即使在“加载后”的 html 部分上也能很好地工作。

我的fontawesome.js 是这样的：

import { library, dom, config } from '@fortawesome/fontawesome-svg-core';

config.autoReplaceSvg = true;
config.observeMutations = true; // <- this is what you need the most

import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';

library.add(faUser, faFacebook);

// And this is important too
// Replace any existing <i> tags with <svg> and set up a MutationObserver to
// continue doing this as the DOM changes.
dom.watch();

...然后我在我的vendors.js 中需要这个fontawesome.js。

文档中提到了它不适合您的原因：

不同的默认配置
Font 时默认开启 DOM 监视 Awesome 是从 @fortawesome/fontawesome-free 或 @fortawesome/fontawesome-pro 但它已被禁用 @fortawesome/fontawesome-svg-core.

这里有一些关于configuration、watching the dom 和svg-javascript-core 的有用链接

【讨论】：