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

2022-03-31 00:00:00 css angular font-awesome

在我的Angular5项目中,我使用了字体图标:静态图标和微调图标。 我运行了NPM Install Font-AWOW,并安装了4.7.0版。

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

在我的应用程序中。组件.html

<div class="center">
  <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
  <p>Loading...</p>
</div>
但我在Chrome的dev控制台中看到的是:

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

如果我使用静态字体可怕的图标,它也会呈现为SVG。为什么?


解决方案

因为您使用的是包作为依赖项,所以这是基于文档的正常情况:https://fontawesome.com/how-to-use/svg-with-js

我们全新的基于SVG的框架,它为您提供了在Web上使用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

相关文章