如何更改角度字体中'fa-icon'元素的旋转速度真棒？

Question

我的组件中有以下HTML模板：

`
<fa-icon class="basketball" [icon]="['fas','basketball-ball']" size="2x" [spin]="true"></fa-icon>
`

这将生成以下 HTML DOM 元素

`
<fa-icon _ngcontent-c9="" class="basketball ng-fa-icon" size="2x" ng-reflect-icon-prop="fas,basketball-ball" ng-reflect-spin="true" ng-reflect-size="2x">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="basketball-ball" class="svg-inline--fa fa-basketball-ball fa-w-16 fa-spin fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="
    animation-duration: 7s;
"><path fill="currentColor" d="..."></path></svg>
</fa-icon>

'

然后，我有一个针对类fa-spin CSS 属性来减少旋转持续时间，如下所示：

`
.fa-spin{
 animation-duration: 7s;
}

'但是，这不会覆盖由 fa-icon 显示的内部 HTML svg 元素。手动将动画持续时间的内联 CSS 属性添加到 svg 元素时，它会按预期工作。由于某种原因，我无法针对 svg 类 .fa-spin。有什么想法吗？

Answer 1

将 css 添加到全局样式.css。例如：

.fa-spin {
  animation: fa-spin 1s infinite linear !important;
}