CODEWITHSUNDEEP
angularangular-material2
Moshe
Moshe

Reputation: 2684

Angular add css to FontAwesome on hover

I have a button, with a FontAwesome icon and some text:

<button md-button><i class="fa fa-cog fa-2x"></i> Configure</button>

With FontAwesome, we can animate any icon by adding the 'fa-spin' class to the <i> element.

I would like to add 'fa-spin' class to <i> element when <button> is hovered over. How do I do this with Angular 4?

Upvotes: 2

Views: 1149

Answers (2)

Amir Deljuyi
Amir Deljuyi

Reputation: 9

1. with cdn: you can put <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> on your head tag

2. with npm install fontawesome with npm install font-awesome --save then create vendor.scss in app folder and wirte this code
`$fa-font-path: '~font-awesome/fonts';

@import 'node_modules/font-awesome/scss/font-awesome';`

import this file to your module import 'vendor.scss';

Upvotes: -1

yurzui
yurzui

Reputation: 214047

You can do by using only css:

1) Add class fa-spin-hover to button:

<button md-button class="fa-spin-hover"><i class="fa fa-cog fa-2x"></i> Configure</button>

2) Declare .fa-spin-hover style

.fa-spin-hover:hover i.fa {
  -webkit-animation: fa-spin 2s infinite linear;
  -moz-animation: fa-spin 2s infinite linear;
  -o-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

Plunker Example

Upvotes: 2

Related Questions