在实际的项目开发过程中，总会用到一些图标。这些小图标如果是自己做成 png格式，麻烦还不方便。不过可以考虑下 font-awesome 这种字体图标是矢量图标，放大缩小也不会失真，方便还省事。目前最新版本是 5.x。
先说自己遇到的错误
复制粘贴代码，没有对比版本。 4.x 和 5.x 在使用语法上有区别
先下载的是 v4.7 的版本，使用的是 5.x的语法。
字体图标没有显示出来
解决方式
如果你发现你不能正确使用请看这里，其实大体的意思就是，检查你使用的版本，4x 和 5x 版本在语法上有不同；如何选择导入需要的文件。
v4.7 版本使用说明
- 官网地址
https://fontawesome.com/v4.7.0/icons/ - 用例说明
1. npm install font-awesome
2. 在 styles.sass @import '~font-awesome/css/font-awesome.min.css';
3. 然后在官网找个例子，将代码贴进去
<i class="fa fa-angle-left"></i>
v5.x 版本使用
- 官网地址
https://fontawesome.com/ - 自己使用的一个配置。
npm install @fortawesome/fontawesome-free
// styles.sass 导入
@import '~@fortawesome/fontawesome-free/css/fontawesome.css';
@import '~@fortawesome/fontawesome-free/css/solid.css';
// 如果你嫌弃麻烦直接引入所有的
// @import '~@fortawesome/fontawesome-free/css/all.css';
// html
<i class="fas fa-angle-left"></i>
- 其它的几种使用方式
可以点击How to use 这里罗列了几种方式。我试过 Angular 指令这种方式，不是很喜欢。
图例
结语
我书写的例子仅是用 npm 下载好后导入。官网还有很多其它的方式也是可以使用。选择适合自己的方式最好。
