Angular 8执行ng build后Font Awesome图标无法加载排查求助

看起来你遇到的核心问题是字体文件请求被路由拦截并重定向到首页，导致图标显示为空框——咱们一步步来拆解和解决这个问题：

一、先检查Angular的静态资源配置（最容易忽略的点） #

Angular只会把angular.json里配置的assets文件夹当作静态资源处理，如果你的字体文件夹没被正确配置，开发服务器或生产构建时就不会识别这些文件，甚至会把请求交给路由处理。

1. 打开项目根目录的angular.json，找到architect > build > options > assets数组；
2. 确保你的字体文件夹路径被包含进去，比如：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/assets/styles/fonts" // 显式添加字体文件夹，避免层级问题导致识别失败
]

如果只写"src/assets"理论上包含子文件夹，但显式添加能避免很多奇怪的路径问题。

二、排查路由配置的通配符拦截 #

如果你的路由模块（比如app-routing.module.ts）里有类似下面的通配符路由，它会把所有未匹配到路由的请求（包括字体文件请求）重定向到首页：

{ path: '**', redirectTo: '/home', pathMatch: 'full' }

开发环境快速验证：

临时注释掉这条通配符路由，重启ng serve，再访问字体文件URL，如果能正常打开，说明就是路由拦截的问题。

生产环境服务器配置（以Nginx为例）：

需要让服务器优先处理静态资源请求，而不是交给Angular路由。在Nginx配置文件里添加：

# 处理assets下的所有静态资源
location /assets/ {
    try_files $uri $uri/ =404;
}

# 单独处理字体文件，避免跨域问题
location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
    try_files $uri $uri/ =404;
}

这样服务器会直接返回字体文件，不会交给Angular路由处理。

三、确认@font-face的路径和文件匹配 #

打开你放在assets里的font-awesome.css，检查@font-face规则：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  /* 其他字体格式路径... */
}

• 确认../fonts/对应的实际路径（assets/styles/fonts）下，所有字体文件（fontawesome-webfont.eot、woff2等）都存在；
• 检查URL里的版本号参数（?v=4.7.0）是否和文件实际情况匹配——如果你的文件没有这个后缀也没关系，查询参数不影响服务器找文件，但如果文件本身缺失，就会触发404进而被路由重定向。

四、回到更规范的方案：直接引用node_modules中的Font Awesome #

其实你最开始的思路是对的，直接引用npm安装的库是Angular项目的标准做法，之前没生效大概率是没重启服务器。

1. 确保已经安装依赖：

npm install font-awesome --save

2. 在angular.json的styles数组中添加：

"styles": [
  "src/styles.css",
  "./node_modules/font-awesome/css/font-awesome.css"
]

3. 一定要重启ng serve，因为angular.json的修改需要重启服务器才能生效。
   这种方式不需要手动复制文件到assets，Angular会自动处理静态资源，从根源避免路径问题。

总结 #

最可能的问题是静态资源未被Angular正确识别或者服务器路由拦截了字体文件请求。优先检查angular.json的assets配置，再排查路由和服务器设置，最后可以尝试回到直接引用node_modules的标准方案。

内容的提问来源于stack exchange，提问作者joler-botol