Angular 在鼠标悬停时将 css 添加到 FontAwesome

Question

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

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

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

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

Answer 1

你可以只使用 css:

1) 添加 class 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 然后在应用程序文件夹中创建 vendor.scss 并编写此代码
`$fa-font-path: '~font-awesome/fonts';

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

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

Angular 在鼠标悬停时将 css 添加到 FontAwesome

Angular add css to FontAwesome on hover

angular-material2

angular