Font Awesome 5 新特性

上一篇文章：Font Awesome 4.7 图标库用法详解中，讲解了如何上手使用Font Awesome 的主流版本之一4.7版本，也是给需要学习Font Awesome 5版本的同学做一个铺垫。本文将介绍在学会Font Awesome 4的情况下，如何升级到Font Awesome 最新版本。

Font Awesome 5

关于Font Awesome 5版本，总结起来就是3个特点：

更多图标，由原来的700+变为5000+个图标。
更好的图标，所有图标都被官方重新打磨，图标质量更佳。
更精细的图标分类。

版本一键升级

01 普通用法

从Font Awesome 4 升级到Font Awesome 5 ，首先是前缀的改变，由原来的【fa】改变为【fas】或者【fab】或者【far】，具体哪一个前缀可以在官网中查看。

以笔记本图标【address-book为例】，在Font Awesome 4中是这样引用的

在Font Awesome 5中是这样引用的

02 图标尺寸

除了通过fa-lg、fa-1x、fa-2x或者font-size改变图标大小，Font Awesome 5 中新推出两种改变大小的方法：fa-sm(small，小图标)和fa-xs（超小图标），具体用法如下：

03 图标垂直对齐（统一宽度）

图标对齐一般用在垂直导航菜单中，与Font Awesome 4 相同，为处于同一个父容器中的图标添加【fa-fw】即可让不同宽度的图标对齐。


     hello fontawesome
     hello fontawesome
     hello fontawesome
     hello fontawesome

04 图标应用在列表中

如果想用图表替换列表中默认的项目序号，则fa-ul和fa-li即可轻松搞定。

05 图标的旋转和翻转

对于图标旋转，和Font Awesome 4版本一样，【fa-rotate-】加角度代表顺时针旋转的角度。对于翻转，除了【fa-flip-horizontal】【fa-flip-vertical】，Font Awesome 5 新增了水平垂直均翻转【fa-flip-both】。

图标的旋转和翻转

06 图标动画

对于图标的旋转动画，一般用在加载页面，和Font Awesome 4版本一样，【fa-spin】、【fa-pulse】样式都可以让图标旋转。

图标动画

07 图标的环绕与边框

关于文本环绕如表的效果，Font Awesome 4 版本使用【pull-right】或【pull-left】来实现左环绕和右环绕。在Font Awesome 5中，需要使用【fa-pull-right】或【fa-pull-left】。给图标添加边框则两个版本相同，都使用【fa-border】。

文本环绕



文本环绕图标  文本环绕图标  文本环绕图标   文本环绕图标 
文本环绕图标 文本环绕图标 文本环绕图标 文本环绕图标 
文本环绕图标 文本环绕图标

图标加边框



        图标加边框  图标加边框 图标加边框 图标加边框 图标加边框 图标加边框
        图标加边框  图标加边框 图标加边框 图标加边框 图标加边框 图标加边框

08 多图标组合

多图标组合，Font Awesome 4版本和Font Awesome 5版本是一样的，都是在父容器添加【fa-stack】，为组合的大图标添加【fa-stack-2x】样式，为组合的小图标添加【fa-stack-1x】样式。组合后的图标大小颜色可以由父容器统一控制，也可以由被组合的图标自己控制。

组合图标

以上就是Font Awesome 5 常规版本的主要内容，如果您还需要更多图标、更多功能，则需要购买Font Awesome 5付费版。