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();

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

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

不同的默认配置
当Font时，默认情况下DOM监视处于打开状态真棒是从@fortawesome/fontawesome-free加载的，或者 @fortawesome/fontawesome-pro，但由于 @fortawesome/fontawesome-svg-core。

在configuration，watching the dom和svg-javascript-core上有一些有用的链接

动态使用真棒字体图标不适用于SVG和JS实现

1 个答案: