font awesome图标不显示的根本原因是加载链断裂：路径错误、类名不匹配（v6需fa-solid等前缀）、font-family未生效或字体文件未200加载。
font-family 里写了名字，但字体没生效
这不是 HTML 或 JS 的问题，而是 CSS 的 @font-face 没配对或没加载成功。浏览器只认你声明过的 font-family 名字，但不会自动去找同名文件。
必须显式用 @font-face 告诉它：这个名字对应哪个文件、什么格式、在哪儿。漏掉这条规则，哪怕字体文件放在根目录，font-family: 'Inter' 也只会回退到 sans-serif。
-
@font-face中的src路径是相对于该 CSS 文件位置的，不是 HTML 页面——比如 CSS 在/css/style.css，字体在/fonts/inter.woff2，就得写url('../fonts/inter.woff2') - 优先提供
format('woff2')，再 fallback 到format('woff')；不要只写.ttf，移动端和现代浏览器对它的支持不稳定 - 加
font-display: swap，避免文字长时间空白；不加的话，字体加载期间可能显示空白或系统字体闪动
iconfont 图标显示方块或空白
方块 ≠ 代码写错，而是 Unicode 映射链断了：CSS 里 .icon-home::before { content: "\e600"; } 插入字符 → 浏览器靠 @font-face 加载的字体把 \e600 渲染成图形。任一环节失败，就只剩方块。
- 打开 DevTools → Network → 过滤
font，确认iconfont.woff2返回状态码是200；404说明路径错，403或mime type not font/woff2是服务器配置问题 - 检查 computed 样式，看元素是否真用了
font-family: 'iconfont'；如果父级设了font-family: 'Helvetica', sans-serif且没重置，子元素的伪元素也会被降级 - 别把
iconfont.css放在 Vite / Webpack 的public/目录下——构建工具不会重写里面url()的路径，容易导致字体请求错位
Font Awesome v6 图标类名总不生效
FA v6 把图标拆成了风格前缀 + 图标名，fa-home 已废弃。写错前缀，图标就只是个空格。
- 实心图标必须用
fas fa-house（不是fa-home），线框用far fa-house，品牌图标用fab fa-github - CDN 地址必须是 v6+ 版本，例如：
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css；v5 的 CDN 加 v6 类名，必然失效 - 确保
<link>在最顶部，早于任何可能覆盖font-family的 CSS；否则即使加载成功，样式也可能被后加载的规则压掉
本地部署时字体文件 404 怎么快速定位
90% 的 404 不是文件丢了，而是路径解析错位。关键不是“文件放哪儿”，而是“CSS 里写的路径，相对于谁”。
- 最省事方案：把
iconfont.woff2和iconfont.css放同一目录，CSS 里保持原样url('iconfont.woff2')，不用改任何路径 - 必须分开放时：打开
iconfont.css，全局替换所有url('iconfont.为url('../fonts/iconfont/iconfont.（注意是相对 CSS 文件位置，不是 HTML） - 绝对路径如
url('/fonts/iconfont.woff2')在本地开发服务（如localhost:3000/myapp/）下大概率 404，因为浏览器按站点根目录找，而实际资源在子路径下
font-family 必须和 @font-face 里声明的名字完全一致；FA v6 的类名结构变了，不是改个名字就能跑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
