图标显示为方框的根本原因是字体文件未加载，常见于woff2文件404、iis缺少mime类型配置、css相对路径错误或跨域限制，需逐项排查network面板、文件路径、服务器配置及部署结构。
图标显示为方框，基本不是代码写错了，而是字体文件压根没加载进来——CSS里@font-face声明再完整，url()指向的woff2文件404了，照样白搭。
检查 Network 面板里字体请求是否 404
打开浏览器 DevTools → Network 标签 → 刷新页面 → 筛选 font 或 woff2。如果看到 GET /fonts/bootstrap-icons.woff2 404，问题就定位了：路径或服务端配置出问题，不是前端 class 写错。
- 确认 CSS 文件所在位置和
fonts/目录是否同级（比如css/bootstrap-icons.css对应的是fonts/在css/同级目录） - 别依赖构建工具自动拷贝字体；手动验证
fonts/bootstrap-icons.woff2是否真实存在于部署后的静态资源路径下 - 本地用
file://协议打开 HTML 时，Chrome 会因security.fileuri.strict_origin_policy拦截字体——这不是 bug，是安全策略，换http-server或live-server启服务测
IIS 上必须补全 woff/woff2 的 MIME 类型
Windows Server + IIS 是字体 404 的高发区。哪怕文件物理存在、路径也对，IIS 默认不认 .woff2，直接返回 404。
- 进 IIS 管理器 → 选站点或服务器节点 → 双击「MIME 类型」
- 添加两行：
.woff→application/font-woff，.woff2→application/font-woff2 - 顺手补上：
.eot→application/vnd.ms-fontobject，.ttf→font/ttf - 改完不用重启 IIS，但浏览器缓存要清——尤其检查 Network 里请求的还是不是旧路径
把 CSS 里的相对路径改成绝对路径
bootstrap-icons.css 里默认是 url("./fonts/...")，这个 . 是相对于 CSS 文件位置算的，不是 HTML。上线后目录结构一变，路径立刻失效。
- 打开
bootstrap-icons.css，全局替换：url("./fonts/→url("/fonts/（注意开头加/） - 确保部署后
/fonts/bootstrap-icons.woff2能被浏览器直接访问（比如在地址栏输https://yoursite.com/fonts/bootstrap-icons.woff2能下载） - 别指望 Webpack/Vite 自动重写 font url——除非你显式配了
url-loader或asset规则，且生效范围覆盖了 CSS 中的url()
跨域场景下字体无法加载，CSS 无解
如果字体放在 https://cdn.example.com/fonts/，而页面在 https://app.example.com，浏览器会报 Access to font at '...' from origin '...' has been blocked by CORS policy ——这是硬限制，@font-face 不支持跨域，加 Access-Control-Allow-Origin 响应头也没用。
- 唯一靠谱方案：把字体和页面放同一域名下（比如都走
https://app.example.com/fonts/） - 次选方案：放弃字体图标，改用 SVG 内联或
<use href="icons.svg#alarm"></use>，完全绕过字体加载机制 - 别试“改响应头”“代理转发”之类临时方案——字体跨域是浏览器层封死的，不是服务端能妥协的
最容易被跳过的其实是 IIS MIME 配置和 CSS 路径解析逻辑：前者一行配置就能救活整个图标系统，后者很多人以为路径是按 HTML 算的，结果调半天 class 名才发现是 CSS 文件位置搞错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
