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元素。当手动将animation-duration的内联CSS属性添加到svg元素时，它会按预期工作。由于某些原因，我无法定位svg类.fa-spin。有什么想法吗？

Answer 1

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

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

如何更改有角字体中“ fa-icon”元素的旋转速度？

1 个答案: