FontAwesome静态旋转翻转图标类（fa-rotate&fa-flip）

最新推荐文章于 2025-06-08 15:00:00 发布
原创 最新推荐文章于 2025-06-08 15:00:00 发布 · 2.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#FontAwesome #类 #静态旋转翻转图标

FontAwesome提供了fa-rotate和fa-flip类用于图标操作。fa-rotate可实现图标顺时针或逆时针旋转，如将fa-shield图标旋转90度；fa-flip则用于图标翻转，包括水平（fa-flip-horizontal）和垂直（fa-flip-vertical）翻转。通过这些类，可以灵活调整图标的展示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

对于一个FontAwesome图标有时我们希望它能旋转个多少度或者翻转一下来显示，而不是直接显示上去，也因此FontAwesome提供了两个类——fa-rotate和fa-flip。

fa-rotate类

<i class="fa fa-shield fa-rotate-90"></i>

功能：将"fa-shield"这个图标顺时针旋转90度显示。

fa-flip类

<i class="fa fa-shield fa-flip-horizontal"></i>

功能：将"fa-shield"这个图标左右进行翻转。如果要上下进行翻转，请将fa-flip-horizontal改为fa-flip-vertical。

运行实例

备注：fa-rotate与fa-flip的最大差别就在于fa-rotate是让图标进行旋转，而fa-flip是让图标进行翻转。如果你想逆时针旋转90度，相当于顺时针旋转270度。

以下为代码

<!DOCTYPE h
最低0.47元/天 解锁文章

200万优质内容无限畅学
fa-spinner旋转小圈圈-Font Awesome字体
luxiaopengyou的博客
06-04 409
http://www.fontawesome.com.cn/get-started/ <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="styleshe
FontAwesome动态旋转图标类（fa-spin&fa-pulse）
SkeletonKing233的博客
08-19 5280
不管是我们在网上打游戏，还是上网学习的时候，网页在加载时往往都会出现一个不停在转着圈的加载图标，可是这种图标是怎么实现的呢？其中一种方法就是用FontAwesome图标提供的两个很不错的类——fa-spin和fa-pulse。
leftlet 使用font-awesome图标 并进行旋转
cuisidong1997的博客
06-01 325
在js文件之间加载leaftlet js 文件，一般使用最新版 如1.8 使用图标 L.marker([31,117], {rotationAngle:270 ,icon: L.AwesomeMarkers.icon({icon: ‘cloud-download’, prefix: ‘fa’, markerColor: ‘green’,spin:true}) }).addTo(map);
Bootstrap3 Font Awesome 字体图标旋转或翻转图标
歪脖先生的博客
06-05 3829
旋转或翻转图标 Font Awesome提供了一组样式类，可以对图标进行固定角度的旋转或翻转。这些类分别是 .fa-rotate-90（顺时针旋转90度）、.fa-rotate-180（顺时针旋转180度）、.fa-rotate-270（顺时针旋转270度）、.fa-flip-horizontal（水平翻转）、.fa-flip-horizontal（垂直翻转）。如： <divclass...
android中使用fontawesome
shidaping的博客
01-10 475
1.下载并引入ttf文件 ttf文件下载地址：https://github.com/FortAwesome/Font-Awesome/blob/master/fonts/fontawesome-webfont.ttf 在android应用中创建assets资源文件夹并将上面的复制进去。 2.在strings.xml中加入fontawesome字符。 fontawesome
Bootstrap 框架
菜鸟心声：学的不仅是技术，更是梦想！
03-19 896
第02章-前端核心技术-Bootstrap框架 Bootstrap框架第02章-前端核心技术-Bootstrap框架Bootstrap 概述支持的浏览器Bootstrap 安装Bootstrap 基础边距显示隐藏其他Bootstrap 布局Bootstrap 按钮按钮组Bootstrap 导航面包屑导航（Breadcrumb）基础导航栏垂直菜单菜单铺满标签页导航（nav-tabs）面包屑导航 （nav-pills）Bootstrap 折叠Bootstrap 轮播图Bootstrap 表格Bootstrap分
告别像素时代，拥抱矢量之美！Font Awesome：前端开发者效率倍增的秘密武器
最新发布
wylee的博客
06-08 864
在 Font Awesome 出现之前，我们处理图标的方式通常是这样的：图片图标（PNG/JPG/GIF）：CSS Sprites（CSS雪碧图）：这些传统方式在现代前端开发中已显得力不从心。而 Font Awesome 的出现，犹如一股清流，彻底颠覆了我们对图标的使用方式。它将图标转化为矢量图形或Web字体，从根本上解决了上述所有痛点。Font Awesome 不仅仅是一个图标集合，它是一个经过精心设计和持续迭代的完整图标生态系统。让我们深入了解其核心优势：Font Awesome 拥有令人惊叹的图标数量
Android中的GridView详解
逍遥飞鹤的专栏
08-03 6780
1.GridView实例anzs 本文主要实现如下功能：登陆界面经过通信线程鉴权后返回各种权限，权限对应各种功能模块，打算将各种功能模块以GridView方式显示给用户，GridView中放置各种功能图标，如果权限不足则置灰。   界面参考如下图片（软件来自电信内部掌上办公平台）：   登陆界面在这里不再赘述，本文主要关心以面向对象的方式来构建GridVi
相见恨晚的编程学习词典！谁还不是南极滑冰的那个崽儿？！
weixin_45981643的博客
10-01 6446
received: 审查，复习，回顾，评论 de facto standard: 约定成俗的 spot: 地点，部位，场所，斑点，污点，点；太阳黑子；局部，地区；亮点；现货 linguistic: 语言学 AI - Platform : 人工智能平台 launch: 发布 launchpad: 控制台 canonical: 权威的，经典的 disambiguation: 消歧义 context: 语境 tokenize: 标记化 numeral system: 计数系统。使用一组数字符号表示数（number
ifont图标和Fontawesome图标
你还有我
03-31 1018
下载为png最方便。
有了Font Awesome,再也不担心没图标用了----Font Awesome字体图标在android中的使用
qiang_xi的专栏
02-20 3175
介绍Font Awesome如何在android中使用之前,先贴出一个链接: 如何在安卓app中使用FontAwesome图标 这篇文章是泡网上的一篇译文,可以先看看这篇,了解个大概 我这里把泡网上的关于android使用Font Awesome的具体方法详细说一下: 直奔主题吧, android中使用Font Awesome其实很简单,我们知道比如一个TextView或者Butto
FontAwesome 字体图标库 使用
wuyujin1997的博客
05-19 1万+
Intro Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 fa被设计为与内联元素一起使用。 <i>和<span>标签被广泛应用于图标。(推荐使用<i>，标签更简短，且语义更精确) 当使用fa的图标重叠时候，在<span>标签中嵌套两个<i>标签。 依赖 两种方法，直接引入CDN或引入本地依赖(略)。 CD...
CSS组件：字体图标
沉梦昂志
06-21 1103
字体图标就是文字，只是这种文字长得和图标一样 字体图标优缺点 字体拥有的属性（字体大小、颜色等），均适用于字体图标 具有矢量性，无限放大也不会有马赛克，保证清晰度 字体图标大小相对于图片要小很多，加载快，灵活 字体图标只能是单一颜色，图片可以多种颜色混合 fontawesome使用步骤 下载解压 将css和webfonts移动到项目中 使用link将all.css引入网页 ...
Font Awesome 方向图标
csbysj2020的博客
08-31 840
Font Awesome 的方向图标可以通过 CSS 进行自定义，包括大小、颜色、阴影等。color: red;此外，还可以使用 CSS 的:hover伪类来改变鼠标悬停时图标的样式。
Font Awesome矢量图标框架
weixin_30905981的博客
05-14 474
Font Awesome矢量图标框架 一、font awesome简介 目前图标总数共有519个; 不依赖Javascript 矢量图形,无限缩放 免费,可用于商业 CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果 支持retina显示(苹果retina 屏幕) 源于BS框架(最初的目标设计使用方向...
Fontawesome字体使用说明及其常用效果语法
shuai_wy的专栏
07-10 2万+
本文主要介绍Fontawesome图标的使用说明及其常用效果语法，在本文中会介绍 图标的旋转，图标的堆叠，图标的规格，图标的方向等常用语法。
font awesome 的一些使用心得
u013589542的博客
01-18 3332
本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 引用块内容 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接
fa fa-spinner 旋转小圈圈图标
青崖梦
07-15 1420
<!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7
Font Awesome的正确简单使用方法
热门推荐
halftion
03-12 5万+
网上看了许多的Font Awesome使用介绍，都是要引用Font-Awesome.css文件，还需要把整个Font Awesome文件都拷贝到项目中，这样不仅容错率极低，一旦不小心把文件路径改了，整个项目的icon部分就挂掉了。而且其中的很多文件其实根本使用不到，白白浪费服务器内存，也不便于后期网站的维护，下面将介绍Font Awesome的正确使用方法。 要使用Font Awes...
深入探索Font Awesome 4.7.0的图标集和使用方法
开发者可以使用`fa-rotate-90`、`fa-rotate-180`、`fa-rotate-270`以及`fa-flip-horizontal`和`fa-flip-vertical`类来实现对图标的旋转和翻转效果。 #### 响应式图标 Font Awesome 提供了创建响应式图标的能力，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值