基本操作
Font Awesome字体图标的使用方法非常简单：
1、首先要引入Font Awesome的css样式：<link rel="stylesheet" href="css/font-awesome.min.css" rel="nofollow noopener" >。
2、在你想放置图标的地方添加<i>标签（或使用<span>标签），并给<i>添加你想要的图标的class，如下所示：
<i class="fa fa-camera-retro"></i> 注意：第一个fa是必须的。
3、如果在图标后你想添加文字，最好在<i>标签后添加一个空格。
图标尺寸
fa-lg fa-2x fa-3x fa-4x fa-5x
要相对于字体图标的容器增加它们的尺寸，可以使用class fa-lg(增加33%)，fa-2x，fa-3x，fa-4x或fa-5x。
<i class="fa fa-camera-retro fa-lg"></i>fa-lg <i class="fa fa-camera-retro fa-2x"></i>fa-2x <i class="fa fa-camera-retro fa-3x"></i>fa-3x <i class="fa fa-camera-retro fa-4x"></i>fa-4x <i class="fa fa-camera-retro fa-5x"></i>fa-5x
如果你使用大图标时字体图标的上面或下面看不见了，请检查是否指定了足够的行高。
固定宽度的图标
使用fa-fw可以将图标设置为固定宽度。这在不同宽度的图标要进行对齐时十分有用。特别是在制作导航列表和列表组是特别有用。
<div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a><a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a> </div>
作为列表图标使用
- List icons
- can be used
- as bullets
- in lists
使用class fa-ul和fa-li可以很容易的将无需列表的图标转换为字体图标。
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-circle "></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul>
边框和浮动
…Birds born in a cage think flying is an illness.
使用class fa-border和fa-pull-right或fa-pull-left可以很容易的制作出文章的引用图标。
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i> ...Birds born in a cage think flying is an illness.
图标动画
使用class fa-spin可以使任何图标执行旋转动画，使用class fa-pulse可以使图标以8步为周期进行旋转。可以完美执行旋转动画的图标有：fa-spinner，fa-refresh和fa-cog。
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i>
某些平台和某些浏览器上执行图标动画会发生不正常的晃动。CSS3动画不支持IE8-IE9浏览器。
旋转和翻转
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
要任意旋转和翻转图标，可以使用class fa-rotate-*和fa-flip-*。
<i class="fa fa-shield"></i> normal<br> <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> <i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
CDN加速调用
你可以使用下面的CDN加速地址来加载Font awesome字体图标：
5.10.0版本的CDN加速地址：
- bootcdn：https://cdn.bootcss.com/font-awesome/5.10.0-12/css/fontawesome.min.css
4.7.0版本的CDN加速地址：
- bootcdn：https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css
4.4.0版本的CDN加速地址：
- maxcdn：https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
- cdnjs：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css
官方网站及下载
FontAwesome官方网站：http://fontawesome.com/
官方下载地址：https://fontawesome.com/download
GitHub下载地址：https://github.com/FortAwesome/Font-Awesome
本地文件包下载
FontAwesome4.7.0版本网站站长版+5.10.2版本web+desktop版本压缩包
4.7网站站长版：调用简单，将css文件和字体文件放在同一文件夹，在HTML的[code] <head>[/code] 中引用[code]font-awesome.min.css[/code]就OK了。
5.1web版：包括网页字体所需CSS、SVG、JS、SVG文件。
5.1desktop版：包括桌面系统可安装和使用的SVG和OTF字体。
关注站长公众号：魂之乐享，公众号内回复：FA图标
