css - FontAwesome 为什么图标以 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 的开发控制台中看到的是:

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

如果我使用静态 Font Awesome 图标，它也会呈现为 SVG。为什么？

Answer 1

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

Our brand new SVG-based framework that gives you all the benefits of using SVG icons on the web without all of the hassle. We’ve kept the syntax and steps simple, and built tools for sizing, placement, and styling on top of that.

如果您想以不同的方式使用它，我会将其作为字体添加到 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