Font Awesome
Font Awesome 是为 Twitter Bootstrap 设计的图标字体，通过Web Font的方式来显示一些图标，好处是图标可以被任意缩放、改变颜色，你需要做的只是像修改文字样式那样修改图标样式，现在非常多的网站还有博客都是使用的这套图标。基本使用
1.在站点的在head处引入官方的font-awesome.min.css
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2.其他博客或者网站就在你的header头部引入就可以了
3.Handsome主题直接在：设置外观-开发者设置-自定义输出header头部的HTML代码
4.引入完成，就去这个图标库里去找你想要的图标 图标库
然后复制下来这串代码，然后就可以把这个 i 标签放在任何位置。
5.举个栗子 
比如我要在我博客右侧的统计信息评论前面加上这个图标，就找到这个部分的源码，然后找合适的位置粘贴进去就行，当然也可以直接在现有的class里去添加，在现有的class添加就只用 “fa fa-grav” 就可以了，如果要替换现有的图标直接在现有的class修改
进阶使用
1.图标放大，为了增加图标大小相对于它们的容器，使用fa-lg（33％递增）
fa-2x， fa-3x，fa-4x或fa-5x类。
fa-lg
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
2.旋转并翻转，若要对图标进行任意旋转和旋转，可以使用fa-rotate和fa-flip-类
normal fa-rotate-90 fa-rotate-180 fa-rotate-270
fa-flip-horizontal fa-flip-vertical
<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> fa-flip-vertical
3.组合图标，如果想要将多个图标组合起来，使用fa-stack类，作为父容器，fa-stack-1x作为正常比例的图标，fa-stack-2x作为大一些的图标。还可以使用fa-inverse类来切换图标颜色，在父容器中通过添加更大的图标类来控制整体大小。
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>fa-ban on fa-camera
4.动态图标，先引入一个css动画，引入方式和上面一样。使用这个CSS动画来实现动态图标，使用fa-spin使任意图标种植旋转，可以还使用fa-pulse使其进行方位旋转
<link rel="stylesheet" href="https://itggg.bj.bcebos.com/cdn/font-awesome-animation.min.css">
Loading...Loading...Loading...Loading...Loading...
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
1. | 2. | 3. | 4. | 5. | 6. | 7.
8. | 9. | 10.11. | 12. | 13.
<i class="fa fa-wrench faa-wrench animated fa-3x"></i>
<i class="fa fa-bell faa-ring animated fa-3x"></i>
<i class="fa fa-envelope faa-horizontal animated fa-3x"></i>
<i class="fa fa-thumbs-up faa-vertical animated fa-3x"></i>
<i class="fa fa-exclamation-triangle faa-flash animated fa-3x"></i>
<i class="fa fa-thumbs-up faa-bounce animated fa-3x"></i>
<i class="fa fa-plane faa-float animated fa-3x"></i>
<i class="fa fa-heart faa-pulse animated fa-3x"></i>
<i class="fa fa-trophy faa-tada animated fa-3x"></i>
<i class="fa fa-space-shuttle faa-passing animated fa-3x"></i>
<i class="fa fa-space-shuttle faa-passing-reverse animated fa-3x"></i>
<i class="fa fa-circle faa-burst animated fa-3x"></i>
<i class="fa fa-star faa-falling animated fa-3x"></i>
参数说明：animated 循环动态
animated-hover 鼠标移动到图标上动态
效果演示：移动鼠标到图标上
|
<i class="fas fa-bell faa-ring animated-hover"></i>
<i class="fas fa-spinner faa-spin animated-hover"></i>
评论 (0)