角新增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悬停

回答

相关问题