问题背景
在使用 Angular5 进行前端开发的过程中，可能会涉及到使用 font awesome 图标库来渲染页面。在开发阶段使用这些图标并不会有什么问题，但是一旦将 Angular5 项目构建打包成生产环境进行发布，就会出现 font awesome 图标无法显示的问题。
这是因为，在项目构建过程中，Angular5 会将 css 文件进行压缩和混淆，而 font awesome 图标的 css 文件中包含的字体文件路径可能会被修改，导致字体文件无法正确加载，最终导致图标无法显示。
解决方案
下面介绍两种解决方案。
方案一：手动修改 css 文件
我们可以手动修改 font awesome 的 css 文件，将字体文件的路径修改为相对路径。
比如，将原来的代码：
-- -------------------- ---- -------
---------- -
------------ --------------
---- ------------------------------------------------
---- ------------------------------------------------------ ----------------------------
------------------------------------------------- ----------------
------------------------------------------------ ---------------
----------------------------------------------- -------------------
------------------------------------------------------------------ --------------
------------ -------
----------- -------
-修改为：
-- -------------------- ---- -------
---------- -
------------ --------------
---- --------------------------------------------------
---- -------------------------------------------------------- ----------------------------
--------------------------------------------------- ----------------
-------------------------------------------------- ---------------
------------------------------------------------- -------------------
-------------------------------------------------------------------- --------------
------------ -------
----------- -------
-这样，字体文件的路径就会变成相对路径，不受项目构建后文件路径的影响。
方案二：使用 font-awesome-angular
另一种解决方案是使用 font-awesome-angular 库。这是一个 Angular5 的 Font Awesome 组件，可以直接在 Angular5 中使用 Font Awesome 图标，而不需要手动引入 css 文件。
使用方法如下：
安装 font-awesome-angular：
npm install --save @fortawesome/angular-fontawesome@0.7.0
安装 Font Awesome：
npm install --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons
在 app.module.ts 文件中引入：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ----------------- - ---- ----------------------------------- ------ - ------- - ---- ------------------------------------ ------ - --------- -------------- -------- - ---- ------------------------------------ --------------------- -------------- ---------- -- ------- ----------- ------------- - ------------ -- -------- - -------------- ----------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -在页面中使用：
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
到这里你已经可以在使用中更新 Font Awesome 加入图标了！
总结
使用 font awesome 图标时可能会出现无法显示的问题。手动修改 css 文件中字体文件的路径为相对路径或使用 font-awesome-angular 库都是解决这个问题的好方法。希望这篇文章对大家能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aa254dadd4f0e0ff3b49b4