新版的Font Awesome图标开始支持svg。
众所周知，svg有更好地表现能力。
例如，在72dpi的显示器上，不会有像之前的图标字体一样的锯齿。
但是，图标字体毕竟是以字体形式使用的，也有自己的一些优势。比如可以像操作文本一样操作图标字体。
下面正式开始介绍如何在网页中使用Font Awesome。

使用方法有：

1. 基于svg格式，使用js调用图标
2. 基于网页字体，使用css调用图标
3. 使用免费CDN源调用图标

 
首先，上面的第三个使用免费CDN源调用图标的方法目前是测试（BETA）版。且按常理，CDN源有的时候会因节点故障导致无法及时获取资源。且源数据在国外的服务器上，这将导致js文件会加载失败。
所以这个方法虽然最简单，加载有的时候也是最快的。但还是存在一定的风险。当然，CDN方法总是要讲一讲的，会在本页最后进行讲解。

所以，下面着重讲解前两种方法。

小贴士：

需要了解的是，新版的 Font Awesome 考虑到其图标的加载性能，对图标进行了分类。
分别是：

• regular(普通图标)
• solid(实心图标)
• brand(品牌图标)
• light(超细细体，但是目前只有收费版才有)

 
那么如果想使用的是facebook,微博，微信的图标那么调用brand相关的，js或者css（同时加载相关图标字体文件）就可以了。

 
无论是js方法还是css方法，首先都需要下载资源包。

• 点击这里下载fontawesome-free-5.0.8资源包
• 点击这里去往Font Awesome英文官网自行下载最新版

 
压缩包内各资源包说明：

 

基于svg格式，使用js调用图标

使用svg-with-js文件夹内的文件。

第一步：加载所需js文件

如果想包含所有的图标：

<script src="fontawesome-all.js"></script>
<!-- 或 -->
<script src="fontawesome-all.min.js"></script>

后缀含min的为压缩后的文件。体积更小。
如果想包含solid（实心图标）系的图标：

<script src="fa-solid.min.js"></script>
<script src="fontawesome.min.js"></script>
<!-- 在调用solid,brand,regular系js时都要调用的文件 -->

同理适用于与brand及fa-regular。
压缩包中含有fa-v4-shims.js文件。这个是为了兼容4.x版本的升级使用。如果已有4.x版本的项目，想更换成svg图标，那么需要额外调用fa-v4-shims.js或fa-v4-shims.min.js文件。以保证兼容性。

第二步：从Font Aewsome官网获取相应图标的代码后嵌入到页面指定

图标列表：https://fontawesome.com/icons?d=gallery&m=free

<!-- 下面有两种类型的图标，分别是solid和regular。是从前缀fas和far中得知的。fa代表font awesome。s代表solid，r代表regular-->
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<!-- 品牌图标 -->
<i class="fab fa-github-square"></i>

这种使用js方式调用的图标，最终在DOM中会以svg代码显示图标。
而下面的css方式调用，以网页字体的方式显示，则dom结构内没有svg代码。
 

基于网页字体，使用css调用图标

使用web-fonts-with-css文件夹内的文件。

第一步：加载需要的文件

这里需要注意的是，css方法要调用两组文件，一个是css（ 或 less 或 scss）样式表。另一组是图标字体文件。
所以css方法调用时，实际上要用到的是css文件夹及webfonts文件夹里的文件。
如果想包含所有的图标：

<link rel="stylesheet" href="fontawesome-all.css">
<!-- 或 -->
<link rel="stylesheet" href="fontawesome-all.min.css">

要注意，css文件与webfonts文件夹的相对位置。否则，样式表无法锁定字体文件，字体无法显示。都是基本功了。
如果想包含brand的图标：

<link rel="stylesheet" href="fa-brands.min.css">
<link rel="stylesheet" href="fontawesome.min.css">
<!-- 在调用solid,brand,regular系css时都要调用的文件 -->

第二步：从Font Aewsome官网获取相应图标的代码后嵌入到页面指定

图标列表：https://fontawesome.com/icons?d=gallery&m=free

<!-- 下面有两种类型的图标，分别是solid和regular。是从前缀fas和far中得知的。fa代表font awesome。s代表solid，r代表regular-->
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<!-- 品牌图标 -->
<i class="fab fa-github-square"></i>

CDN调用

head区域添加代码：
下面这个cdn源是5.0.8版本的。

<script defer="" src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

如需更多的cdn资源请浏览官网。
https://fontawesome.com/get-started/svg-with-js
 

延伸阅读

如何在photoshop中使用5.x版本的Font Awesome字体？