角新增CSS來FontAwesome懸停

我有一個按鈕，一個FontAwesome圖標和一些文字：角新增CSS來FontAwesome懸停

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

隨着FontAwesome，我們可以通過添加「發旋」類的<i>動畫的任何圖標元件。

當<button>懸停時，我想添加'fa-spin'類到<i>元素。我如何使用Angular 4做到這一點？

來源

2017-05-11 Moshe

您可以通過使用CSS只能做：

1）添加fa-spin-hover類按鈕：

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

2）聲明.fa-spin-hover風格

.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

來源

2017-05-11 19:49:27 yurzui

我需要的！ – Moshe

1. CDN： 你可以把<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">在你頭上的標籤

2. NPM 安裝fontawesome與npm install font-awesome --save 然後創建在app文件夾vendor.scss和WIRTE這個代碼
`$ fa-font-path：'〜font-awesome/fonts';

@import 'node_modules/FONT-真棒/ SCSS /字體真棒';'

導入此文件到您的模塊import 'vendor.scss';

來源

2017-05-11 19:53:02

角新增CSS來FontAwesome懸停

回答

相關問題