为什么 Font Awesome 图标以 SVG 格式呈现？

Question

在我的 Angular5 项目中，我使用 FontAwesome 图标：静态图标和微调器。 我运行了 npm install font-awesome 并安装了 4.7.0 版本。

"dependencies": {
  ....
  "font-awesome": "4.7.0"
}

在我的app.component.html中

<div class="center">
  <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
  <p>Loading...</p>
</div>

但是我在 Chrome 的开发控制台中看到的是：

并且微调器没有正确的脉冲式动画。

如果我使用静态字体很棒的图标，它也会呈现为 SVG。为什么？

Answer 1

因为您将包用作依赖项，所以根据文档，这是正常的：https://fontawesome.com/how-to-use/svg-with-js

我们全新的基于 SVG 的框架，为您提供在网络上使用 SVG 图标的所有好处，而无需任何麻烦。我们保持语法和步骤简单，并在此基础上构建了用于调整大小、放置和样式的工具。

如果你想以不同的方式使用它，我会将其添加为 css/sass 文件中的字体，或者：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/vX.XX.XX/css/all.css"

文档：https://fontawesome.com/get-started/web-fonts-with-css

而不是作为 js 库：https://fontawesome.com/get-started/svg-with-js