Font Awesome不仅支持固定角度的旋转,还提供了带动画的旋转图标。可以使用.fa-spin类让任意图标动态持续旋转,还可以使用.fa-pulse类让图标以 8 步为周期进行旋转,它们尤其适合表示刷新、加载等功能的图标,如.fa-spinner、.fa-refresh和.fa-cog等:
<div class="fa-3x"> <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-twitter fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i> </div> |
效果如图 5‑7所示:需要注意的是,转动的图标是通过CSS3动画实现的,IE9及以下版本的浏览器不支持CSS3的特性,因此看不到动画效果。