图标不显示的常见现象是本地正常、发布后变方框或空白，Network中字体请求404或被拦截；主因是IIS未配置woff/woff2 MIME类型、CSS相对路径失效、CDN跨域未授权。
Bootstrap图标不显示的常见错误现象
本地开发时图标正常，一发布到IIS或Nginx就变成方框、空心矩形，或者干脆是空白；浏览器开发者工具里能看到 GET /fonts/glyphicons-halflings-regular.woff 404 (Not Found) 或者 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT；控制台没有JS报错，但CSS中 @font-face 规则里的字体路径始终 404。
IIS服务器必须添加woff/woff2 MIME类型
这是Windows Server + IIS环境下最常被忽略的配置项。IIS默认不识别 .woff 和 .woff2 文件类型，直接拒绝响应，返回404而非403——哪怕文件物理存在、路径也正确。
解决方法：
- 打开IIS管理器 → 选择站点或服务器节点 → 双击「MIME类型」
- 点击右侧「添加…」→ 扩展名填
.woff，MIME类型填application/font-woff - 再加一条：
.woff2→application/font-woff2 - 如果还用到
.eot、.ttf、.svg，也一并补上：application/vnd.ms-fontobject、font/ttf、image/svg+xml
改完无需重启IIS，但浏览器缓存要清（尤其检查 Network 标签页是否仍发旧请求）。
字体路径错误：相对路径在部署后失效
Bootstrap 3 的 bootstrap.css 里默认写的是 url('../fonts/glyphicons-halflings-regular.eot') 这类相对路径。本地用 file:// 协议可能侥幸跑通，但一旦走 HTTP（如 http://example.com/css/bootstrap.css），浏览器会按 CSS 文件所在位置解析 ../fonts/... —— 如果你把 CSS 放在 /assets/css/，而 fonts 实际放在 /fonts/（同级），那这个 ../ 就会指向 /assets/fonts/，自然 404。
实操建议：
- 统一将
fonts/目录放到网站根目录下（即与css/、js/同级） - 手动修改
bootstrap.css中所有@font-face的url()，全部改为绝对路径，例如：url('/fonts/glyphicons-halflings-regular.eot') - 不推荐用构建工具重写路径（除非你真用上了 webpack 或 vite），简单项目直接改 CSS 更可控
Cross-Origin 字体加载被拦截（尤其CDN或子域名场景）
如果你把字体文件托管在 CDN（如 https://cdn.example.com/fonts/...），而主站是 https://app.example.com，Chrome/Firefox 会因 CORS 策略阻止字体加载，控制台提示 Access to font at '...' from origin '...' has been blocked by CORS policy。
关键点：
- 字体资源本身不支持
Access-Control-Allow-Origin: *的跨域头，服务端必须显式设置 - CDN 需单独配置该 header，例如 Cloudflare 页面规则中添加
Access-Control-Allow-Origin: https://app.example.com - 自建 Nginx 服务器可在字体 location 块中加：
add_header 'Access-Control-Allow-Origin' 'https://app.example.com'; - 注意：不能设为
*+credentials: true，否则无效；若前端用了 withCredentials，后端 origin 必须精确匹配
这个坑往往藏得深——因为图片、JS、CSS 都能跨域加载，唯独字体被严格限制，容易误判为路径或权限问题。
真正麻烦的不是某一个环节，而是这三者常同时出问题：IIS没配MIME、CSS里路径还是相对、CDN又没开CORS。建议按顺序排查：先看 Network 里字体请求的状态码（404？403？Blocked？），再确认路径是否真实可达，最后才动服务器或CDN配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
