Font Awesome圖標僅顯示方框/文字/空白，通常由字體文件加載失敗、CSS路徑錯誤、版本不匹配、偽元素語法錯誤、網絡/CDN限制導致。本文提供系統排查清單。
| 檢查項 | 正確狀態 | 常見錯誤 |
|---|---|---|
| 字體文件引用 | CSS中`@font-face` `src`路徑正確，文件存在 | 相對路徑錯誤、文件缺失、IIS未配置`.woff2` MIME類型 |
| CSS文件引用 | `` 200 OK | 路徑錯誤、CDN被牆、未引入 |
| 版本一致性 | HTML類名與CSS版本匹配（v4: `fa fa-*`，v5+/v6: `fas fa-*`/`fab fa-*`） | v4類名用v5 CSS，或相反 |
| 偽元素語法 | `font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";` | 缺`font-weight`、字體族名錯誤、content編碼錯 |
| 網絡/CDN | 字體文件下載成功（Network面板200，類型font） | 跨域無CORS、HTTPS頁面引HTTP、防火牆攔截 |
| 字體加載策略 | `font-display: swap/block` 避免FOIT | 字體加載慢導致長時間空白 |
| 版本 | CSS類前綴 | 字體族名 | 字重要求 |
|---|---|---|---|
| 4.7 | `fa fa-user` | `FontAwesome` | normal (400) |
| 5.x / 6.x | `fas fa-user` (實心) / `far fa-user` (常規) / `fab fa-github` (品牌) | `Font Awesome 5 Free` / `Font Awesome 5 Brands` / `Font Awesome 6 Free` | 實心 `900`，常規 `400`，輕量 `300` |
90%問題源於：版本類名不匹配、字體文件404/MIME缺失、偽元素font-weight缺失。按清單逐項排查必解。
