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

旋转或翻转图标

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

<div class="fa-lg">
 normal 
 fa-rotate-90 
 fa-rotate-180 
 fa-rotate-270 
 fa-flip-horizontal 
 fa-flip-vertical
</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 上开源。

Bootstrap3 Font Awesome 字体图标旋转或翻转图标相关推荐

Bootstrap3 Font Awesome 字体图标的堆叠
堆叠的图标 Font Awesome还支持将多个图标叠加在一起组成一个复合图标.如果想要将多个图标堆叠起来,需要给容器元素添加.fa-stack类,为图标元素使用.fa-stack-1x作为正常比例的 ...
Bootstrap3 Font Awesome 字体图标带动画的图标
带动画的图标 Font Awesome不仅支持固定角度的旋转,还提供了带动画的旋转图标.可以使用.fa-spin类让任意图标动态持续旋转,还可以使用.fa-pulse类让图标以 8 步为周期进行旋转, ...
Bootstrap3 Font Awesome 字体图标
简介 Font Awesome 是一套绝佳的图标字体库,它提供可缩放的矢量图标,并且可以通过CSS来设置大小.颜色.阴影或者其它任何支持的效果.Font Awesome具有以下特性: 一个字库,675 ...
Bootstrap3 Font Awesome 字体图标的基本图标
基本图标 Font Awesome图标跟Glyphicon图标的用法完全相同,所有图标都需要一个基类 .fa 和对应每个图标的 .fa-* 类.只需创建一个行内元素,并为它应用图标类,即可使用Font ...
Bootstrap3 Font Awesome 字体图标带边框的图标
带边框的图标使用.fa-border类,可以类轻易构造出带有圆角边框的图标.还可以添加.pull-right或.pull-left类,让图标向右或向左浮动,所有图标都支持这两个类.如: <di ...
Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
Font Awesome一套绝佳的图标字体库和CSS框架的使用
场景 Font Awesome 一套绝佳的图标字体库和CSS框架官网: http://fontawesome.dashgame.com/ 实现从官网下载资源文件,解压后的目录将上面解压后的四个目 ...
Vue 中使用 Font Awesome 字体图标
1.安装官网转载于 https://blog.csdn.net/qq_40663357/article/details/99655930 安装基础依赖: npm install --save @f ...
Font Awesome字体图标库
Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...

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

旋转或翻转图标

Bootstrap3 Font Awesome 字体图标旋转或翻转图标相关推荐

最新文章

热门文章