最轻量可控的图标方案是@font-face+unicode，但90%问题源于字体路径错、content值不匹配或pua字形缺失，任一环节断裂即显示方块。
直接用 @font-face + Unicode 字符是最轻量、最可控的方式，但 90% 的问题出在字体路径错、content 值不匹配、或私有区（PUA）字形缺失——这三者任一断掉，图标就显示为方块。
为什么按钮里图标显示成方块或空白
浏览器靠三件事协同工作：HTML 元素触发 ::before 伪元素 → CSS 插入 content: "\e600" 这样的 Unicode 码点 → 字体文件把 \e600 渲染成对应图标。缺一不可。
-
iconfont.css里没定义.icon-home::before { content: "\e600"; }，或者写成了空字符串、引号漏了、码点写错（比如"\uE600"多了个u） - DevTools Network 面板里过滤
font，看到iconfont.woff2返回404—— 说明字体根本没加载 - Computed 样式里查不到
font-family: 'iconfont'，可能是父级设置了font-family: sans-serif且没 fallback，导致字符被降级渲染
本地部署时 @font-face 路径总 404 怎么修
关键：所有 url() 是相对于 iconfont.css 文件位置算的，不是 HTML 页面路径。Vite/Webpack 项目里尤其容易踩坑。
- 最省事：把
.woff2、.woff、.eot和iconfont.css放在同一目录下，CSS 里保持默认url('iconfont.woff2') - 必须分开时：打开
iconfont.css，把每个url('iconfont.woff2')改成相对路径，比如字体在/src/assets/fonts/iconfont.woff2，而 CSS 在/src/assets/css/iconfont.css，就得写成url('../fonts/iconfont.woff2') - 别用绝对路径如
url('/fonts/iconfont.woff2')—— 本地开发走子路径（如localhost:3000/myapp/）时会 404 - 构建工具（Vite/Webpack）里若把
iconfont.css放进public/目录，它不会重写url()，路径极易错乱，应避免
按钮中正确使用自定义字体图标的 HTML/CSS 写法
别套用 Font Awesome 那套 <i class="fa fa-home"></i> 模式——你自己的字体没有预设类名，得自己定义语义化类，并确保 font-family 和 content 对齐。
- HTML 中写：
<button class="btn btn-home"><span class="icon-home"></span>首页</button>（用<span></span>而非<i></i>，语义更清晰） - CSS 里声明：
.icon-home::before { font-family: 'iconfont'; content: '\e600'; }，且确保该字体已通过@font-face正确加载 - 加一行
display: inline-block或vertical-align: middle防止图标和文字基线不对齐 - 如果按钮用了
flex布局（推荐），可直接给图标加margin-right: 6px或用gap控制间距，比伪元素更直观
容易被忽略的兼容性细节
不是所有字体文件都一样；不同浏览器对格式、私有区、权重的容忍度差异很大。
-
@font-face声明里必须按顺序写woff2、woff、eot，IE 依赖eotfallback，漏掉它在旧环境就彻底不显示 -
font-weight和font-style必须设为normal，否则某些浏览器（尤其是 Safari）会拒绝匹配字体 -
font-display: swap必须加上，否则图标首次加载会空白闪动；但别用block，会导致长时间不可见 - 自己生成字体时，务必勾选“包含私有区字符（PUA）”，否则导出的字体文件里根本没有
\e600这个码位对应的图形
真正卡住人的从来不是“怎么写”，而是“为什么没显示”——盯着 DevTools 的 Network 和 Computed 面板看两分钟，比重写十遍 CSS 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
