Bootstrap3 Font Awesome 字体图标旋转或翻转图标

旋转或翻转图标

Font Awesome提供了一组样式类，可以对图标进行固定角度的旋转或翻转。这些类分别是 .fa-rotate-90（顺时针旋转90度）、.fa-rotate-180（顺时针旋转180度）、.fa-rotate-270（顺时针旋转270度）、.fa-flip-horizontal（水平翻转）、.fa-flip-horizontal（垂直翻转）。如：

1. <div class="fa-lg">
2. <i class="fa fa-shield"></i> normal<br>
3. <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
4. <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
5. <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
6. <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
7. <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
8. </div>

效果如图 5‑6所示：

图5-6 旋转或翻转图标

需要注意的是，转动的图标是通过CSS3的transform实现的，IE9及以下版本的浏览器不支持CSS3的特性，因此看不到动画效果。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。