Question

我有一个按钮，带有FontAwesome图标和一些文字：

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

使用FontAwesome，我们可以通过将“fa-spin”类添加到<i>元素来为任何图标设置动画。

我希望在<i>悬停时将'fa-spin'类添加到<button>元素。我如何使用Angular 4进行此操作？

Answer 1

您只能使用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

Answer 2

<强> 1。用cdn：你可以将<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">放在头标上

<强> 2。与npm 使用npm install font-awesome --save安装fontawesome 然后在app文件夹中创建vendor.scss并打开此代码 `$ fa-font-path：'~font-awesome / fonts';

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

将此文件导入您的模块import 'vendor.scss';

在悬停时将角度添加到FontAwesome的CSS

2 个答案: