生产环境图标变方框主因是字体文件加载失败，常见于iis未配置woff/woff2 mime类型、css中相对路径解析错误或跨域拦截；需在iis添加对应mime类型，统一字体存放路径或改用绝对路径，并避免cdn跨域加载字体。
生产环境图标变方框，基本就是字体文件没加载成功——不是代码写错，而是路径、MIME 类型或跨域拦住了请求。
IIS 未配置 woff/woff2 MIME 类型
Windows Server + IIS 部署时，.woff 和 .woff2 文件默认不被识别，直接返回 404，哪怕文件物理存在、路径也对。浏览器 Network 标签里能看到 GET /fonts/bootstrap-icons.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/bootstrap-icons.woff2")。本地开发时可能因文件结构巧合跑通，一上线就崩——因为浏览器按 CSS 文件位置解析路径，不是按 HTML。
- 把
fonts/目录放到网站根目录下（和css/、js/同级），最省事 - 或者直接改
bootstrap-icons.css：把所有url("./fonts/...")换成绝对路径，如url("/fonts/bootstrap-icons.woff2") - 别依赖构建工具自动重写路径，除非你真配了
url-loader或file-loader处理.woff2
CDN 或子域名托管字体时被 CORS 拦截
如果字体放在 https://cdn.example.com/fonts/，而页面是 https://app.example.com，Chrome/Firefox 会直接拒绝加载，控制台报 Access to font at '...' from origin '...' has been blocked by CORS policy。
- 字体资源本身不支持
Access-Control-Allow-Origin响应头（这是浏览器硬性限制，不是服务端能绕开的） - 要么把字体和页面放同一域名下（推荐）
- 要么换 SVG 图标方案（
<svg></svg>内联或<use></use>引用），彻底避开字体跨域问题 - 别信“加响应头就能解决”——对字体文件无效
最容易被忽略的是 IIS 的 MIME 类型配置，很多团队查了一整天路径和 CDN，最后发现只是漏加了两行配置。另外，bootstrap-icons.css 里的路径是相对 CSS 文件位置算的，不是 HTML，这点很多人想反了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
