bootstrap图标生产环境不显示，90%以上是字体文件加载失败，需检查字体路径、iis mime配置（.woff/.woff2）、cors策略及bootstrap 5中navbar-toggler父容器是否含.navbar类。
Bootstrap图标在生产环境不显示，90%以上是字体文件加载失败，不是CSS或JS没引入。本地能看、上线就变方框，说明问题出在字体路径解析、服务器配置或构建流程上，和代码逻辑无关。
检查 Network 中字体请求是否 404 或被拦截
打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 筛选 woff、woff2、eot 请求。常见现象：
-
GET /fonts/glyphicons-halflings-regular.woff 404 (Not Found)→ 路径错或文件缺失 -
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT→ 浏览器插件（如广告屏蔽）拦截了字体请求 -
Access to font at 'https://cdn.example.com/fonts/...' has been blocked by CORS policy→ CDN 未配Access-Control-Allow-Origin
IIS 必须手动添加 woff/woff2 MIME 类型
Windows Server + IIS 是最常踩坑的组合。IIS 默认拒绝响应 .woff/.woff2 文件，哪怕物理路径完全正确，也返回 404。
- 打开 IIS 管理器 → 选择站点或服务器节点 → 双击「MIME 类型」
- 点击「添加…」→ 扩展名填
.woff，MIME 类型填application/font-woff - 再加一条：
.woff2→application/font-woff2 - 顺手补上：
.eot→application/vnd.ms-fontobject，.ttf→font/ttf - 改完不用重启 IIS，但要清浏览器缓存，尤其确认 Network 是否还在发旧路径请求
把 fonts 目录放到网站根目录，CSS 里改用绝对路径
Bootstrap 3 的 bootstrap.css 里默认写的是 url('../fonts/...')，这个相对路径在部署后极易失效——比如 CSS 放在 /assets/css/，而 fonts 实际在 /fonts/，../fonts/ 就会解析成 /assets/fonts/。
- 将
fonts/目录直接放在网站根目录下（与css/、js/同级） - 编辑
bootstrap.css，把所有@font-face中的url(...)改成绝对路径，例如：url('/fonts/glyphicons-halflings-regular.eot') - 不要依赖构建工具自动重写路径，除非你真用了 Webpack/Vite 并配好了
url-loader或asset模块
Bootstrap 5 的 navbar-toggler-icon 不显示？检查父容器有没有 .navbar 类
Bootstrap 5 把折叠按钮图标改成 CSS 变量驱动：--bs-navbar-toggler-icon-bg。这个变量只在 .navbar 类作用域内定义。
- 如果
<button class="navbar-toggler"></button>的父元素没有.navbar类，background-image就是空值 - 修复方式很简单：给包含
navbar-toggler的最外层容器加上class="navbar" - 不需要改 JS，也不需要额外引入图标文件，纯 CSS 作用域问题
最容易被忽略的是 IIS 的 MIME 配置和 Bootstrap 5 的 .navbar 类约束——前者导致字体根本到不了浏览器，后者连请求都不会发。这两个点不排查，其他操作都是白忙。
