Font Awesome 或 iconfont 图标不显示主因是路径、类名、字体族三处加载链断裂；需确认 CDN 版本前缀（如 fas）、font-family 生效、字体文件 200 加载及 content 值匹配。
直接用 CDN 引入 Font Awesome 或 iconfont 的 CSS，再写 或 就能显示图标——但 90% 的“不显示”问题，其实卡在路径、类名、字体族三处，不是代码写错了，是加载链断了。
Font Awesome CDN 引入后图标不显示
最常见的是版本前缀错或网络策略拦截。Font Awesome 6 把图标类名从 fa-home 拆成了 fas fa-home（实心）、far fa-home（线框），漏掉 fas 就只显示空格。
- 确认
中引入的是 v6+ 地址： - 检查 DevTools → Elements 面板，右键图标元素 → “检查”，看 computed 样式里
font-family是否生效为"Font Awesome 6 Free"；如果显示sans-serif，说明字体没加载或被父级样式覆盖 - 本地开发时若用
file://协议打开 HTML，部分浏览器会因 CORS 拒绝加载 CDN 字体——换http://localhost启服务，或改用本地文件
iconfont.css 本地引入后字体文件 404
@font-face 里的 url() 是相对于 iconfont.css 文件位置解析的，不是相对于 HTML 页面。你把 CSS 放在 /css/iconfont.css，字体文件却放在 /fonts/iconfont.woff2，那默认的 url('iconfont.woff2') 必然 404。
- 最省事：把
.woff2、.eot、.ttf等字体文件和iconfont.css放在同一目录，不用改任何路径 - 必须分开时：打开
iconfont.css，把所有url('iconfont.woff2')改成url('../fonts/iconfont.woff2')（注意是相对 CSS 文件，不是 HTML） - 别写
url('/fonts/iconfont.woff2')这种绝对路径——本地开发路径可能是localhost:3000/myapp/，部署后变成example.com/，路径就全崩了
HTML 里写了
图标渲染依赖三要素同时成立：font-family: 'iconfont' 生效 + .icon-home::before { content: "\e600" } 存在 + 字体文件中 \e600 位置真有字形。缺一不可。
- 打开
iconfont.css，搜索.icon-home，确认它有定义且content值是非空 Unicode（如"\e600"），不是空字符串或注释掉 - DevTools → Network 面板过滤
font，看iconfont.woff2是否返回 200；404 或 blocked 就得先修路径或关广告屏蔽插件 - Computed 样式里检查
font-family最终值，如果父容器设了font-family: "PingFang SC", sans-serif且没给图标元素重置，浏览器会 fallback 到系统字体，\e600 就变方块
Vite / Webpack 项目中把 iconfont.css 放 public 目录出问题
public 下的文件不会被构建工具处理，@import 和 url() 都原样保留，但构建过程可能把字体文件复制到 assets/ 下，导致路径错位。
- 别把
iconfont.css放public/后再用@import引入——构建器不会重写它内部的url() - 推荐做法：把整个 iconfont 文件夹（含 CSS 和字体）放进
src/assets/fonts/，然后在主样式中@import "@/assets/fonts/iconfont.css";；这样构建器能正确解析并哈希字体路径 - 如果用了 Symbol 方式（
），注意 SVG sprite 文件也要走构建流程，不能丢进public/
真正卡住人的从来不是“怎么写”，而是“为什么没显示”。盯着 Network 面板看字体是否 200、对着 computed 样式查 font-family 是否落地、逐行核对 CSS 里的 content 值和 HTML 类名——这三步做完，95% 的图标问题就定位完了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
