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

最新推荐文章于 2023-03-31 14:54:32 发布
最新推荐文章于 2023-03-31 14:54:32 发布
阅读量2.6k 收藏 2
点赞数 1
文章标签： FontAwesome 类 静态旋转翻转图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SkeletonKing233/article/details/99733504
版权
FontAwesome提供了fa-rotate和fa-flip类用于图标操作。fa-rotate可实现图标顺时针或逆时针旋转，如将fa-shield图标旋转90度；fa-flip则用于图标翻转，包括水平（fa-flip-horizontal）和垂直（fa-flip-vertical）翻转。通过这些类，可以灵活调整图标的展示效果。
摘要由CSDN通过智能技术生成

对于一个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度。

以下为代码


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  SkeletonKing233
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
FontAwesome动态旋转图标类（fa-spin&fa-pulse）

				
			

			

				

					SkeletonKing233的博客
				

				

					08-19
					
					5027
					
				

			

		

		

			
				
不管是我们在网上打游戏，还是上网学习的时候，网页在加载时往往都会出现一个不停在转着圈的加载图标，可是这种图标是怎么实现的呢？其中一种方法就是用FontAwesome图标提供的两个很不错的类——fa-spin和fa-pulse。

			
		

	



                

              
                



	

		

			

				
					
fa-spinner旋转小圈圈-Font Awesome字体

				
			

			

				

					luxiaopengyou的博客
				

				

					06-04
					
					323
					
				

			

		

		

			
				
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

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					歪脖先生的博客
				

				

					06-05
					
					3666
					
				

			

		

		

			
				
旋转或翻转图标

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

<divclass...

			
		

	





	

		

			

				
					
leftlet 使用font-awesome图标 并进行旋转

				
			

			

				

					cuisidong1997的博客
				

				

					06-01
					
					276
					
				

			

		

		

			
				
在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);

			
		

	



		

			
		



	

		

			

				
					
android中使用fontawesome

				
			

			

				

					shidaping的博客
				

				

					01-10
					
					420
					
				

			

		

		

			
				
1.下载并引入ttf文件
ttf文件下载地址：https://github.com/FortAwesome/Font-Awesome/blob/master/fonts/fontawesome-webfont.ttf
在android应用中创建assets资源文件夹并将上面的复制进去。


2.在strings.xml中加入fontawesome字符。

    fontawesome

			
		

	





	

		

			

				
					
ifont图标和Fontawesome图标

				
			

			

				

					你还有我
				

				

					03-31
					
					775
					
				

			

		

		

			
				
下载为png最方便。

			
		

	





	

		

			

				
					
number-flip:with通过翻转动画增加您的人数

				
			

			

				

					04-13
				

			

		

		

			
				
数字翻转  通过翻转动画更改数字 安装 $ npm install --save number-flip 用法 导入number-flip  import { Flip } from 'number-flip' 用它！ 创建一个并使其立即翻转：  new Flip ( {  node : $ ( '.flip' ) ,  ...

			
		

	





	

		

			

				
					
react-flip-numbers：in用3D翻转数字

				
			

			

				

					02-09
				

			

		

		

			
				
React翻转编号  使数字动画看起来很性感 :clapping_hands:  在3D空间中翻转数字 超级好用 安装 npm install react-flip-numbers -S 快速开始 import react from ' react ' ; import FlipNumbers from ' react-flip-...

			
		

	





	

		

			

				
					
font-awesome-4.7.0.zip

				
			

			

				

					12-18
				

			

		

		

			
				
`fa-rotate-90`、`fa-flip-horizontal`等类则实现了旋转和翻转效果；而通过堆叠，可以创建复杂的组合图标，如`fa-stack-1x`和`fa-stack-2x`。  对于开发者的便利性，Font Awesome 4.7.0还支持SVG Sprites和JS API，...

			
		

	





	

		

			

				
					
FontAwesome-基本样式-1.1

				
			

			

				

					caishu1995的博客
				

				

					01-11
					
					1208
					
				

			

		

		

			
				
    上次我们了解了基础用法。现在我们接着看吧。

 

大小

    他们提供了好多种型号的。我们可以来看看。

    fa-xs(.75em)   fa-sm(.875em)   什么也加   fa-lg(1.33em)   fa-2x(2em)   fa-3x(3em)

    fa-4x(4em)     fa-5x(5em)     fa-6x6(em)  fa-7x(7em) ...

			
		

	





	

		

			

				
					
有了Font Awesome,再也不担心没图标用了----Font Awesome字体图标在android中的使用

				
			

			

				

					qiang_xi的专栏
				

				

					02-20
					
					3082
					
				

			

		

		

			
				
介绍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...

			
		

	





	

		

			

				
					
Font Awesome-一款吊炸天的字体图标插件中文全介绍

				
			

			

				

					GarfieldEr007的专栏
				

				

					09-03
					
					1万+
					
				

			

		

		

			
				
这款插件是一个不需要图片只需要引入一个字体文件就能制作非常多精美的图标插件，而且这些图标都是矢量的，可以无限放大，而且可以随意的改变颜色，碉堡了！！！
注意，要看一下内容必须用ie9以上或者是chrome或者是火狐浏览器浏览，ie8一下古董没效果（虽然说是支持ie7的，但是需要引入很多东西，懒得测试= =）
点击下载（版本4.0.3）
使用方法：
解压之后又四个文件夹：

1.把css

			
		

	





	

		

			

				
					
Font Awesome矢量图标框架

				
			

			

				

					weixin_30905981的博客
				

				

					05-14
					
					431
					
				

			

		

		

			
				
Font Awesome矢量图标框架



一、font awesome简介


目前图标总数共有519个;


不依赖Javascript


矢量图形,无限缩放


免费,可用于商业


CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果


支持retina显示(苹果retina 屏幕)


源于BS框架(最初的目标设计使用方向...

			
		

	





	

		

			

				
					
Fontawesome字体使用说明及其常用效果语法

				
			

			

				

					shuai_wy的专栏
				

				

					07-10
					
					2万+
					
				

			

		

		

			
				
本文主要介绍Fontawesome图标的使用说明及其常用效果语法，在本文中会介绍 图标的旋转，图标的堆叠，图标的规格，图标的方向等常用语法。

			
		

	





	

		

			

				
					
font awesome 的一些使用心得

				
			

			

				

					u013589542的博客
				

				

					01-18
					
					3253
					
				

			

		

		

			
				
本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：
Markdown和扩展Markdown简洁的语法
引用块内容
代码块高亮
图片链接和图片上传
LaTex数学公式
UML序列图和流程图
离线写博客
导入导出Markdown文件
丰富的快捷键
快捷键
加粗    Ctrl + B 
斜体    Ctrl + I 
引用    Ctrl + Q
插入链接

			
		

	





	

		

			

				
					
fa fa-spinner 旋转小圈圈图标

				
			

			

				

					青崖梦
				

				

					07-15
					
					1329
					
				

			

		

		

			
				
<!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介绍

				
			

			

				

					oiaa的博客
				

				

					10-06
					
					2845
					
				

			

		

		

			
				
Font Awesome 是一套完美的图标字体库及CSS架构,主要目的是和 Bootstrap 搭配使用。

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

Font Awesome已经为你准备了将近500个常用icon图标（还在不断更新），能大能小，能随便修改颜色，完全开源，完全免费。

可以让程...

			
		

	





	

		

			

				
					
在脚本文件加入xrandr --output DSI-1 --rotate right

					
最新发布

				
			

			

				

					09-20
				

			

		

		

			
				
`xrandr --output DSI-1 --rotate right` 是一条命令行参数，用于Linux的X Window System（X11）的工具 `xrandr` 中，它允许你改变显示器的显示模式。在这个例子中：

- `--output DSI-1`: "DSI-1" 是指代计算机上的一个显示器连接端口，可能是 HDMI、VGA、DVI 或 DisplayPort 等，你需要根据实际设备的名称替换这个部分。
- `--rotate right`: 这表示将该显示器的方向旋转90度到右侧，其他选项还有 `left` (顺时针转)，`normal` (默认无旋转), `inverted` (颠倒颜色) 和 `horizontal-flip` (水平翻转) 等。

如果你想在脚本文件中添加这个命令，你可以创建一个文本文件，比如 `rotate_screen.sh`，然后写入如下内容：

```bash
#!/bin/bash
xrandr --output DSI-1 --rotate right
```

保存后，通过赋予脚本执行权限(`chmod +x rotate_screen.sh`)，然后运行(`./rotate_screen.sh`)即可执行屏幕旋转。记得将 `DSI-1` 替换为你设备的实际端口号。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值