Angular14+Node18环境下Fontawesome图标生产环境不显示问题

云上老周

2026-8-3

解决Angular 14 + Node 18环境下Font Awesome V6生产环境不显示问题

排查与修复步骤

修正资源路径配置
Angular生产构建会处理资源路径，./assets/相对路径可能解析异常。尝试改用绝对路径：

<link rel="stylesheet" href="/assets/web-fonts-with-css/css/all.css" media="none" onload="if(media!='all')media='all'">

同时在angular.json的build配置里确认assets项已包含Font Awesome资源目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "src/assets/web-fonts-with-css/",
    "output": "/assets/web-fonts-with-css/"
  }
]

验证字体文件打包状态
查看生产构建后的dist目录，确认assets/web-fonts-with-css/webfonts/下存在.woff2、.woff等字体文件。若缺失，说明构建时未将字体文件纳入打包，需补充上述angular.json的assets配置。
排查懒加载逻辑影响
当前引用的media="none" onload="if(media!='all')media='all'"懒加载逻辑可能在生产环境加载异常。先改为常规引用测试：
```
<link rel="stylesheet" href="/assets/web-fonts-with-css/css/all.css">
```
若图标正常显示，再调整懒加载逻辑适配生产环境。
查看浏览器控制台错误
打开Chrome开发者工具（F12）切换到Network标签，刷新页面检查：
- 若CSS文件返回404：确认路径与构建后资源位置匹配
- 若字体文件返回404：检查CSS中字体的相对路径是否正确，或构建输出目录是否正确
调整Angular构建优化设置
Angular 14生产构建默认启用的优化可能误删Font Awesome样式。可临时关闭优化测试：
```
"optimization": false
```
若图标恢复，再针对性调整优化配置，确保Font Awesome样式被保留。