Question

我有此代码：

https://stackblitz.com/edit/angular-u1ctge

带有以下Font Awesome图标代码（用于使用FortAwesome进行角度调整）

<fa-icon [icon]='["fas","cogs"]' spin size='4x' style='z-index: 100; top: 10px; left: 60 px;'></fa-icon>

我试图让齿轮旋转，并使齿轮漂浮在内容上。

我被困住了。

任何输入都会有所帮助。

Answer 1

您需要将其更改为：

<fa-icon [icon]='["fas","cogs"]' size='4x' class="fa-spin" style='z-index: 100; top: 10px; left: 60 px; position: absolute;'></fa-icon>

需要

class fa-spin来旋转图标，但我想您将需要另一个图标，因为整个图标都在旋转，并且您可能希望它们分别旋转。（对此不太确定，从来没有做过很棒的字体）

我也希望绝对定位是您在内容上浮动的意思

Answer 2

要旋转fa-icon组件，必须添加the @fortawesome/angular-fontawesome documentation中提到的[spin]="true"。

旋转的齿轮看上去并不像您期望的那样，它将使整个图标旋转为一个图像，要使齿轮单独旋转，您必须创建尺寸和位置正确的多个旋转图标。

如果位置不是绝对的，则z-index无效。

我建议将此代码作为起始解决方案：

<div style='position: absolute; z-index: 100; top: 50%; left: 40%;'>
  <fa-icon [icon]='["fas","cog"]' [spin]="true" size='4x'></fa-icon>
  <fa-icon [icon]='["fas","cog"]' [spin]="true" size='2x'></fa-icon>
</div>

Here is an edit of your stackblitz.

Angular 6 Z-index和动画问题

2 个答案: