Angular 6 z-index and animation issues

I have this code:

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

with the following Font Awesome icon code (for angular using FortAwesome)

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

I am trying to get the cogs to spin and the cogs to float over the content.

I am stuck.

Any input would help.

Solution

To make the fa-icon component spin you must add [spin]="true" as mentionned in the @fortawesome/angular-fontawesome documentation.

The cogs spinning wont look as you would expect, it will spin the whole icon as one image, to make the cogs spin individually you have to create multiple spinning icons with the right size and at the right position.

The z-index has no effect if the position is not absolute.

I suggest this code as starting solution :

<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.