font-awesome-animated字体的动画效果

来源:互联网 发布:项目计划表软件 编辑:程序博客网 时间:2024/06/07 13:29

对于font-awesome经常使用的人来说,能让其图标具有动画效果简直锦上添花。下面来说说其动画效果的使用

1.下载font awesome animation文件并保存在项目中

2.将font-awesome与font-awesome-animation文件引入

<link rel="stylesheet" href="font-awesome.min.css"><link rel="stylesheet" href="font-awesome-animation.min.css">

3在html文件的相应控件中引入图标

  3.1引入图标,并无其他效果

<i class="fa fa-spinner faa-spin"></i>

 3.2引入图标,动画效果

<i class="fa fa-spinner faa-spin animated"></i>

 3.3引入图标,当鼠标放置图标上方时方有动画效果

<i class="fa fa-spinner faa-spin animated-hover"></i>