-1

i'm using Font Awesome in my Angular application and i'm trying to rotate a refresh icon when it's clicked.

<div class="col-5 d-flex justify-content-end"> 
   <span class="mr-4 pr-3">
      <fa-icon
         style="color: white; font-size: large; top: 0;"
         [icon]="faArrowAltCircleDown"
         (click)="refreshTaskList()">
      </fa-icon>
   </span>
</div>

I've tried to add rotate="360" aswell as transform="rotate-90" but unfortunately all without any success.

I'm open for suggestions.

SS_FStuck
  • 231
  • 1
  • 5
  • 20

1 Answers1

2

You can use CSS only for that, no Angular required:

button:focus i {
  animation: rotate 1s ease-in-out 0s;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<button class="btn btn-primary btn-sm" type="button"><i class="fa fa-play"></i></button>

You could use above code and convert it so it fulfills to your desired results.

Source: Angular Button click rotate icon

Related question (Temani Afif's comment): Font Awesome 5 How to arrange different icons?

Simon
  • 63
  • 1
  • 11
  • i need to use and not – SS_FStuck Jun 16 '21 at 15:07
  • 2
    Like I said in my answer, you could use the sample code I posted and convert it so it works for your desired outcome. Please try and visit the source I posted on the bottom of my answer, I'm sure you'll get quite far. Let me know when you're struggling again. – Simon Jun 16 '21 at 15:13