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 上开源。

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页

打赏

ixygj197875

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者