图标能正常显示的核心是iconfont.css中@font-face的字体路径必须正确：路径相对于css文件而非html页面，90%方块问题源于woff2等字体404；须确保iconfont和具体图标类（如icon-home）同时存在，且构建时避免将css放public目录导致路径失效。
图标字体在 HTML 中能正常显示，核心就一条：iconfont.css 里 @font-face 声明的字体路径必须能被浏览器正确解析并加载成功。90% 的“图标变方块”问题都卡在这一步，不是 HTML 写法错，而是字体根本没拉下来。
iconfont.css 中的 url() 路径为什么总 404
浏览器解析 url('iconfont.woff2') 时，路径是相对于 iconfont.css 文件自身位置的，不是相对于 HTML 页面。比如：
-
iconfont.css在/css/iconfont.css - 但
iconfont.woff2实际放在/fonts/iconfont.woff2 - 那么 CSS 里写
url('iconfont.woff2')，浏览器就会请求/css/iconfont.woff2→ 404
解决方向只有两个：
- 最省事：把所有字体文件（
iconfont.woff2、iconfont.woff、iconfont.ttf）和iconfont.css放在同一目录下，CSS 里保持默认url('iconfont.woff2')不用改 - 必须分离：打开
iconfont.css，把所有url('...')改成正确的相对路径，例如url('../fonts/iconfont.woff2') - 别用绝对路径如
url('/fonts/iconfont.woff2')——本地开发（localhost:3000/admin）或子路由部署时极易失效
class="iconfont icon-home" 缺一不可
这两个 class 各司其职，漏掉任意一个，图标都不会渲染：
-
iconfont是字体族声明类，负责挂载font-family: 'iconfont' -
icon-home是具体图标类，负责通过::before { content: "\e600" }插入 Unicode 字符
常见错误写法：<i class="icon-home"></i> ❌ —— 没声明字体族，浏览器不知道该用哪个字体去渲染 \e600；<i class="iconfont"></i> ❌ —— 没指定具体字符，::before 为空
Vite / Webpack 项目中 iconfont.css 放 public/ 目录会怎样
构建工具不会处理 public/ 下的文件，@import 或 <link> 引入后，CSS 内部的 url() 不会被重写，路径几乎必然错乱。
典型表现：
- 开发时正常（dev server 可能兜底），打包后图标全变方块
- 只在根路径（
localhost:3000/）下能用，进子路由（localhost:3000/user）就 404
正确做法：
- 把整个
iconfont文件夹（含iconfont.css和所有字体文件）放进源码目录，如src/assets/fonts/iconfont/ - 在主样式（如
src/style/index.css）中写：@import "@/assets/fonts/iconfont/iconfont.css"; - 构建器会解析并重写所有
url()，确保路径始终正确
图标显示为空白或方块，怎么快速定位
这不是“代码没写对”，而是渲染链某环断了。按顺序查这四点：
- 打开 DevTools → Network 面板，过滤
font，确认iconfont.woff2返回 200；404 就说明字体根本没加载 - Elements 面板选中
<i class="iconfont icon-home"></i>，看 computed 样式中font-family是否最终生效为'iconfont'；若被父级font-family: sans-serif覆盖且无 fallback，就会降级成方块 - 检查该元素的
::before伪元素：content值是否为非空 Unicode（如"\e600"）？打开iconfont.css搜索.icon-home，确认定义存在且未被注释 -
<meta charset="UTF-8">必须在中，否则 Unicode 字符可能乱码或无法识别
最容易被忽略的是：构建工具不处理 public/ 下的 CSS，导致路径在生产环境彻底失效；以及 iconfont 和 icon-home 这两个 class 必须同时存在，少一个都不行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
