最稳方式是下载 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% 是字体加载失败或字符映射断开，不是代码写错了。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器 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 有效得多。
