在國外網站中使用Web字體已經流行起來，雖然使用中文不太靠譜，但我們可以使用圖標字體，也是很是方便的，圖標字體有很多，可看《30個免費網頁圖標字體以及使用方法》一文，其中Font Awesome有較多用戶使用。

今天我們主要向大家介紹一個可以上Font Awesome動起來的CSS文件，現在交互越來越重視，給圖標加上對應的動畫可以增加一些用戶體驗，是很不錯的。

演示

在線演示&下載地址：DEMO

從演示文件中可以看出目前有10種CSS動畫效果，任何Font Awesome圖標都可以使用這些動畫樣式，而不僅是DEMO中的哪幾個圖標，下面一起看看教程。

使用教程：

由于是使用CSS3實現的動畫，所以只兼容IE10+,Safari,Firefox等主流瀏覽器。

Step1: 引入對應CSS文件
首頁要添加Font Awesome的CSS樣式文件。

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

Step2: 給圖標添加動畫樣式，動畫樣式請看演示頁，這里我使用了faa-spin，這時動畫還不可以動的。

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

Step3: 觸法動畫1，添加一個animated的Class，這時圖標可動起來了，無限循環。

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

Step4: 觸法動畫2，通過鼠標經過后才有動畫效果，鼠標移開就會立即停止。
和上面一樣，也是添加一個animated-hover的Class即可。

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