I’m trying to get a button with an fa-icon to rotate 180degrees and then rotate backwards the other way when it’s clicked again. So far I have this (reproduced in the stackblitz), but the icon just does not rotate at all when the button is clicked. Can this be achieved through CSS or do I need to go about this another way?
Stack Blitz: https://stackblitz.com/edit/angular-ivy-5nbjjw?file=src%2Fapp%2Fapp.component.css
app.component.css
.expandButton:focus i {
animation: rotate 1s ease-in-out 0s;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
app.component.ts
import { Component, VERSION } from '@angular/core';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
faChevronDown = faChevronDown;
}
app.component.html
<button class="expandButton" mat-raised-button color="primary" type="button">
<i><fa-icon [icon]="faChevronDown"></fa-icon></i>
</button>
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { PhotoGalleryComponent } from './components/photo-gallery/photo-gallery.component';
import {
FaIconLibrary,
FontAwesomeModule,
} from '@fortawesome/angular-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
@NgModule({
imports: [
BrowserModule,
FormsModule,
PhotoGalleryComponent,
FontAwesomeModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIcons(faChevronDown);
}
}
2
Answers
I wouldn’t force a rotation with CSS if you’re already using font awesome. You can simply use property binding for a much cleaner solution.
Here’s a working SOLUTION
Hope it helps!
just make the
i
display: block
so the result you want in your css