导航前面的图标显示成方块,控制台报 fa-solid-900.woff2 404。字体目录里只有 fa-solid-900.abc123.woff2,文件名多了哈希。第一次遇到会往复杂处想,其实漏掉的多是个小前提。

grep -o 'url([^)]*woff2[^)]*)' wp-content/plugins/*/css/all.min.css
ls wp-content/uploads/combine/*.woff2

合并压缩插件给静态资源加了哈希后缀,CSS 里的 @font-face 地址没同步改。浏览器找不到字体文件,图标字符退回方块。这一点先确认清楚,后面就不用反复试。

「菜单图标字体 404」这类改动最怕改一半,回滚脚本先准备好,再动生产。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。

改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。

能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。

具体做法是,确认 CSS 里的字体路径和磁盘文件名是否一致;把字体文件排除在哈希重命名之外 或者同步重写 CSS;改完强刷一次 字体缓存也会留旧文件。

改完照着核一遍,刷新后图标正常显示,Network 里 woff2 请求返回 200。

作者 9823189