Angular 引入 font awesonme 4.x 或 5

在实际的项目开发过程中，总会用到一些图标。这些小图标如果是自己做成 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 下载好后导入。官网还有很多其它的方式也是可以使用。选择适合自己的方式最好。