Font Awesome 是一款非常流行的图标库，其中包含了各种常用的图标，设计风格独特、简单、易用，同时支持各种常用的web框架。在 Angular 中使用 Font Awesome 也非常简单，本文将会为你介绍具体的实现方式。
步骤
1. 安装 Font Awesome
使用 npm 安装 Font Awesome 最新版本：
npm install @fortawesome/fontawesome-free
或者使用 cdn 地址进行安装：
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/
2. 在 angular.json 文件中添加 Font Awesome 资源
在项目中，需要将 Font Awesome 资源引入到 angular.json 文件中：
-- -------------------- ---- -------
-
----------- -
-------------------- -
-- ---
------------ -
-------- -
---------- -
-- ---
--------- -
-- ---
------------------------------------------------------------
--
---------- -
-- ---
----------------------------------------------------------
-
-
-
-
-
-
-3. 在组件中使用 Font Awesome 图标
在需要使用图标的组件的 .html 文件中加入下面代码：
<i class="fas fa-user"></i>
其中 fas 是图标的样式，可以将 fas 替换成 far、fal 等等，具体样式说明请参考 Font Awesome 官方文档。
fa-user 是图标的名称，可以根据自己的需求替换成其它图标的名称。
- 示例代码:
<!-- 组件代码 --> <div> <i class="far fa-envelope"></i> </div>
- 效果展示:
结论
本文介绍了如何在 Angular 中使用 Font Awesome 图标，简单明了的介绍给大家，希望能帮助到需要使用 Font Awesome 的同学。当然，这只是一些基本的步骤，如果想要自定义样式等等，还可以参考 Font Awesome 官方文档进行更深入的学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f50afe9a7045d0d71934f
