最稳方式是下载 iconfont webfont 包本地引入，确保 @font-face 路径正确并 @import 或内联 css；html 中用 class 方式（如 ）并声明 font-family: ‘iconfont’。
HTML 字体图标不是直接“用”出来的，而是通过加载图标字体文件 + 使用对应 Unicode 或类名来触发渲染；没引入字体资源就写 ，页面只显示方块或问号。
怎么引入 iconfont（以阿里 iconfont 为例）
最稳的方式是下载 Webfont 包本地引入，避免 CDN 不稳定或跨域问题。别直接复制在线链接到 <link> 就以为完事了——很多项目漏掉 @font-face 声明或路径配错。
- 从 iconfont.cn 选好图标 → 下载至本地，解压后把
iconfont.woff2、iconfont.css放进项目静态资源目录（如src/assets/fonts/） - 在
iconfont.css里检查src: url('iconfont.woff2')路径是否匹配实际位置；不匹配就改成相对路径，比如url('../fonts/iconfont.woff2') - 在主 CSS 或入口样式中
@import修改后的iconfont.css，或直接把@font-face块粘进全局样式
怎么写 HTML 才能显示图标
两种主流写法：Unicode（轻量但难维护）、class（推荐，配合构建工具可自动同步）。
- Unicode 方式：查图标详情页的 Unicode 编码（如
U+E601），HTML 中写；注意必须确保该字符在当前字体中存在，且没有被其他字体 fallback 掉 - Class 方式：给元素加
class="iconfont icon-home"，其中iconfont是字体族声明类，icon-home是具体图标类；这个类名来自iconfont.css里的.icon-home:before { content: 'e601'; } - 别漏掉
font-family: 'iconfont'声明——如果父元素设了font-family: 'PingFang SC'，子元素没重置，图标大概率不显示
为什么图标突然变成小方块或乱码
90% 是字体加载失败或字符映射断开，不是代码写错了。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器 DevTools → Network 标签，过滤
woff2，看iconfont.woff2是否返回 404 或 CORS 错误 - 右键图标 → “检查元素”，看 computed 样式里
font-family最终生效的是哪个，是不是被其他 CSS 覆盖了 - 用 class 方式时，确认
iconfont.css里.icon-xxx:before的content值和你调用的 class 名严格一致；大小写、连字符一个都不能错 - Vite / webpack 项目中，如果把
iconfont.css放在public/下却用@import引入，路径解析会失效——public/下的文件不会被构建处理，字体路径容易 404
SVG 替代方案要不要切
纯前端项目、图标数量少、需要颜色/尺寸动态控制时，SVG 更可靠；但图标多、需统一管理、设计师频繁更新时，字体图标仍有不可替代的打包体积和维护效率优势。
- 不要因为“听说 SVG 更现代”就一刀切替换——现有字体图标跑得好好的，换 SVG 意味着要重写所有
<i class="icon-x"></i>，还得补上 aria-label 或role="img" - 如果真要切，优先用
<svg><use href="#icon-home"></use></svg>内联 symbol 方式，而不是每个地方都贴大段 path —— 否则 HTML 体积飙升，复用性反而下降 - 字体图标在高 DPI 屏幕下默认清晰，SVG 若未设置
viewBox或用了固定width/height，缩放后可能模糊
真正卡住人的从来不是“怎么写那个标签”，而是字体文件有没有加载成功、CSS 有没有被覆盖、编码有没有被转义。调试时先盯死 Network 和 Computed，比反复改 HTML 有效得多。