为什么Bootstrap图标部署到服务器后不显示_检查CSS引用路径与字体跨域

图标不显示的常见现象是本地正常、发布后变方框或空白，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配置。