欢迎使用 Web Awesome，这是最大、最棒的开源网页组件库。

SVG 异步加载

使用 JavaScript 加载 SVG 图标提供了一种非阻塞机制，可以在页面上显示图标。如果您想要对图标显示方式进行更细粒度的控制，可以使用 CSS 和我们的加载事件。

虽然异步图标加载允许页面更快地渲染，但它也可能导致页面布局发生偏移。

您可以通过利用 JavaScript 引擎执行的加载操作期间添加到 <html> 标签的一些类来避免图标加载和布局或文本偏移。

<html>
  <head></head>
  <body>
    <i class="fas fa-user"></i> My User

    <script defer src="/static/fontawesome/fontawesome-all.js"></script>
  </body>
</html>

当浏览器开始搜索图标时，<html> 标签将包含 fontawesome-i2svg-pending。（i2svg 是我们将“i 标签转换为 SVG”的缩写）

<html class="fontawesome-i2svg-pending">
  ...
</html>

在图标替换完成后，待处理类将被替换为 fontawesome-i2svg-complete，并且还会添加 fontawesome-i2svg-active 类。

<html class="fontawesome-i2svg-active fontawesome-i2svg-complete">
  ...
</html>

在第一次成功加载图标后，fontawesome-i2svg-active 类将保留。但是，如果加载了另一批图标，complete 将再次切换到 pending。

<html class="fontawesome-i2svg-active fontawesome-i2svg-pending">
  ...
</html>

同样，在图标替换发生后，我们将回到我们的 complete 事件。

<html class="fontawesome-i2svg-active fontawesome-i2svg-complete">
  ...
</html>

这使我们能够使用 CSS 做一些有趣的事情。例如，我们可以隐藏 <body>，直到图标加载完成。

body {
  display: none;
}

.fontawesome-i2svg-active body {
  display: initial;
}

或者只在图标替换后显示某些部分。

<main>
  <div>Main section that always shows</div>

  <div class="wait-for-icons">
    <i class="fas fa-camera"></i> I like cameras
  </div>
</main>

.wait-for-icons {
  display: none;
}

.fontawesome-i2svg-active .wait-for-icons {
  display: initial;
}