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

Question

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

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

有人遇到过这个问题吗？

Answer 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。

文档中提到了它对您不起作用的原因:

Different default configs
DOM watching is on by default when Font Awesome is loaded from @fortawesome/fontawesome-free or @fortawesome/fontawesome-pro but it's disabled for the @fortawesome/fontawesome-svg-core.

以下是关于 configuration 的一些有用链接, watching the dom和 svg-javascript-core