IcoMoon 图标不显示怎么办:一棵排查树
症状无非三种:空白、方块(俗称豆腐块)、或显示成奇怪的字面字符。成因九成集中在六个点上,按下面的顺序查,通常在前两步就能定位。每一步都给了验证手段,不用猜。
1. 字体文件真的加载到了吗?
开发者工具 → Network → 筛选 Font,刷新页面。看到红色 404 就是路径问题(第 2 步);看到文件加载成功但图标仍空白,跳到第 4 步。这是最快的分诊点,先做这步再猜别的。
2. 路径相对的是 CSS 文件,不是页面
style.css 里的 url("fonts/icomoon.woff2") 以 CSS 文件所在目录为基准。把 CSS 挪了位置、fonts 目录没跟着挪,就 404。修法:保持导出包的相对结构,或改成以站点根开头的绝对路径 /fonts/…。
3. 服务器给字体发对 MIME 了吗?
个别老旧服务器对 .woff2 返回错误的 Content-Type 甚至直接 403。Network 面板点开字体请求看响应头:woff2 应为 font/woff2。自建 Nginx/IIS 需要补字体类型映射。
4. 伪元素写法:content 要用转义码点
自己手写 CSS 时,.icon-home:before { content: "\e900"; } 里必须是反斜杠转义的十六进制码点。写成 e900、u+e900 或漏了反斜杠都只会显示字面字符。每个图标的准确码点查速查表最快。
5. 多次导出后码点冲突
重新导出时如果没有用原来的 selection.json 续作,同名图标可能被分到不同码点——旧页面照旧 CSS 显示的就是错的字形。修法:以最新导出的 style.css 为准整体替换,或回到应用重新 Import selection.json 再导出。
6. 缓存兜底
以上都对但页面顽固不变:强制刷新(Ctrl+F5),或给字体 URL 加一次性查询参数 ?v=2 逼浏览器重取。CDN 场景记得同时刷新 CDN 缓存。
还是不行?回到干净起点
用本站的现成打包(491 个图标 + 已生成的 CSS)在一个空白 HTML 里先跑通 demo,再对照你的工程找差异——从「能用的最小示例」倒推,比在复杂项目里正向排错快得多。码点与类名逐个核对用速查表;完整使用流程见中文教程。