Font-awesome图标的初始占位符？

Question

4

我正在使用Font-Awesome图标，并使用推荐的Javascript引用：

<script src="https://use.fontawesome.com/7c7031cd1a.js"></script>

当页面加载完成并出现图标时，所有文本字符串和/或元素会在图标将其指定的宽度空间占用时跳跃到其位置。

有没有什么方法可以避免这种情况？谢谢。

- user5327930

2

你为什么使用font-awesome js而不是css呢？ - JiiB

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- agrm · Accepted Answer

您所看到的是“闪现不可见文本”（或未经样式修饰的内容的闪现）。这是因为在下载外部字体之前，页面已经被渲染出来了。然后，当图标字体下载完成并准备好时，页面将被重新绘制。

虽然可能（但不建议！）将整个页面阻止显示，直到字体加载完毕。您可以在字体加载时隐藏<html>。一旦它们就位，Font Awesome脚本会从<html>中删除.fa-events-icons-loading类，并且所有内容都会同时在浏览器窗口中呈现。

html.fa-events-icons-loading body {
    display: none;
}

您可以将此非阻塞示例与此阻塞版本进行比较。效果不是很明显，但第一个示例会先显示文本，然后在加载图标时重新绘制。第二个示例要等到图标加载完才会显示内容。

编辑：您可以在Font Awesome博客上了解更多关于异步加载的信息。