直接引入iconfont.css并用即可显示图标；关键需确保CSS中字体路径正确、类名与iconfont项目配置一致，且字体文件（如iconfont.woff2）能被正常加载。
怎么在 HTML 里直接用 iconfont 的图标字体
直接引入 CSS 文件 + 正确写 标签就行，不需要额外加载 JS 或构建工具。关键是确保字体文件能被浏览器正常加载，且字符编码和 CSS 类名匹配。
- 去 iconfont.cn 选好图标，点击「添加至项目」→「下载至本地」，解压后拿到
iconfont.css和iconfont.woff2（或.woff）等字体文件 - 把整个文件夹（含 CSS 和字体文件）放到你项目的静态资源目录下，比如
static/fonts/iconfont/ - 在 HTML 的
中引入 CSS：<link rel="stylesheet" href="static/fonts/iconfont/iconfont.css">
- 用的时候写：
<i class="iconfont icon-home"></i>
，其中icon-home是你在 iconfont 项目里给这个图标起的类名
为什么
90% 是路径或类名对不上。iconfont 的 CSS 里用 @font-face 声明字体，它依赖字体文件路径正确；同时每个图标对应一个 Unicode 字符，CSS 通过 ::before 插入该字符，所以类名、字体、字符三者必须一致。
- 检查浏览器开发者工具的 Network 面板：
iconfont.woff2是否返回 200？如果 404，说明iconfont.css里写的字体路径（如url('iconfont.woff2')）相对于 CSS 文件位置错了 - 打开
iconfont.css，搜索你的类名（如icon-home），确认它是否真有定义，且content值是非空 Unicode（如"\e600"） - 确认 HTML 页面没禁用字体渲染：比如父元素设置了
font-family: sans-serif且没 fallback 到iconfont，会导致字符被降级显示为方块 - 别手误写成
—— 虽然也能工作，但语义和默认样式可能不一致；是 iconfont 官方推荐的载体标签
iconfont.css 里的 @font-face 路径怎么改才不报错
路径是相对 iconfont.css 文件本身的，不是相对于 HTML 页面。很多人把它放在 /css/ 下，但字体文件却丢在 /fonts/，结果 CSS 里写的 url('iconfont.woff2') 就会 404。
- 最省事：把字体文件（
.woff2、.woff等）和iconfont.css放在同一目录，CSS 里保持默认路径即可 - 如果必须分开，比如 CSS 在
/css/iconfont.css，字体在/fonts/iconfont/，那就打开iconfont.css，把所有url('iconfont.*')改成url('../fonts/iconfont/iconfont.woff2') - 注意不要写绝对路径如
url('/fonts/iconfont.woff2')，除非你确定部署后的根路径完全匹配；开发环境常是子路径（如localhost:3000/myapp/），绝对路径容易失效 - 现代项目建议用
url('./iconfont.woff2')显式声明同级，比无前缀更可读、更少歧义
用 iconfont 图标字体会影响页面性能或兼容性吗
影响很小，但有两个真实风险点：字体加载阻塞渲染、IE 下旧格式支持问题。它比 SVG Sprite 更轻量，但不如 inline SVG 灵活。
- 字体文件本身很小（通常 @font-face 中加
font-display: swap缓解，即先用系统字体撑开布局，字体就绪后再替换 - IE9+ 支持
.woff，但不支持.woff2；如果你还必须兼容 IE9–11，得保留.woff并在@font-face中按顺序声明多个src，让老浏览器 fallback - 别在 CSS 里用
font-weight或font-style修改图标——图标字体本质是单字形字体，这些属性无效，还可能干扰渲染 - 移动端 Safari 对字体子集支持良好，但若你用的是 iconfont 自动生成的「Unicode 编码」方式（非 Symbol 方式），确保页面
有，否则 Unicode 可能乱码
真正容易被忽略的是：每次从 iconfont.cn 更新图标后，一定要重新下载并覆盖整个 iconfont.css 和字体文件——只换 CSS 不换字体，或只换字体不换 CSS，都会导致图标空白或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
