给网页图标字体 Font Awesome 添加动画效果

《给网页图标字体 Font Awesome 添加动画效果》正文开始，本次阅读大概8分钟。

在国外网站中使用Web字体已经流行起来，虽然使用中文不太靠谱，但我们可以使用图标字体，也是很是方便的，图标字体有很多，可看《30个免费网页图标字体以及使用方法》一文，其中Font Awesome有较多用户使用。

今天我们主要向大家介绍一个可以上Font Awesome动起来的CSS文件，现在交互越来越重视，给图标加上对应的动画可以增加一些用户体验，是很不错的。

演示

在线演示下载地址：DEMO

从演示文件中可以看出目前有10种CSS动画效果，任何Font Awesome图标都可以使用这些动画样式，而不仅是DEMO中的哪几个图标，下面一起看看教程。

使用教程：

由于是使用CSS3实现的动画，所以只兼容IE10+,Safari,Firefox等主流浏览器。

Step1:引入对应CSS文件首页要添加Font Awesome的CSS样式文件。

linkrel=stylesheethref=font-awesome.min.css
linkrel=stylesheethref=font-awesome-animation.min.css

Step2:给图标添加动画样式，动画样式请看演示页，这里我使用了faa-spin，这时动画还不可以动的。

iclass=fafa-spinnerfaa-spin/i

Step3:触法动画1，添加一个animated的Class，这时图标可动起来了，无限循环。

iclass=fafa-spinnerfaa-spinanimated/i

Step4:触法动画2，通过鼠标经过后才有动画效果，鼠标移开就会立即停止。和上面一样，也是添加一个animated-hover的Class即可。

iclass=fafa-spinnerfaa-spinanimated-hover/i