在现代 web 开发中，使用字体图标或矢量图标已经成为了一种时尚。而 FontAwesome 作为一套流行的图标字体，被广泛应用于前端开发中。同时，Angular 作为目前最主流的前端框架之一，也可通过 npm 安装相应的控件包。那么如何方便快捷地在 Angular 中使用 FontAwesome 呢？下面，将介绍 npm 包 angular-font-awesome 的使用方法。
1. 安装
安装方式十分简单，只需要执行以下命令即可：
npm install angular-font-awesome --save
其中，参数 --save 表示将 angular-font-awesome 添加到项目的依赖项列表中。
2. 引入模块和样式
在需要使用该 npm 包的模块中，必须引入对应的模块 AngularFontAwesomeModule 以及样式文件 font-awesome.css。以使用 FontAwesome 中的 字体图标为例：
2.1 引入模块
在模块文件 app.module.ts 中通过以下方式引入模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------------------ - ---- ----------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- ------------------------ -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
2.2 引入样式
可以在全局样式 styles.css 中引用 font-awesome.css 或在组件的样式文件中作为局部样式引入。为了使该 npm 包正常工作，需要在全局样式或组件样式中引用 font-awesome.css 文件：
@import '~font-awesome/css/font-awesome.css';
3. 使用
在模板文件中即可使用该 npm 包提供的指令或组件来展示 FontAwesome 中的字体图标。以使用 fa-user 为例：
<!-- 使用 fa-icon 指令 --> <i fa-icon="user"></i> <!-- 使用 fa 动态组件 --> <fa name="user"></fa>
4. 更多内容
angular-font-awesome 提供了更多高级用法，如自定义图标库、将图标用作按钮等等有趣的用法。对于想要深入学习该 npm 包的同学可以参考官方文档 https://github.com/FortAwesome/angular-fontawesome。
结语
通过 angular-font-awesome，可以使得 Angular 和 FontAwesome 的结合更加方便和灵活。良好的使用方式能够使得开发效率和用户体验都得到提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/presents-the-font-awesome