图标乱码本质是字体文件加载失败导致浏览器回退到系统字体渲染Unicode码点，应优先检查Network中woff2等字体请求是否404、路径是否正确、CORS限制、MIME类型配置及跨域问题。
图标显示为乱码，基本不是 Bootstrap 版本或 class 写错了，而是字体文件根本没加载成功——浏览器 fallback 到系统默认字体后，把 Unicode 码点当普通文本渲染，就出现“”“”这类符号。
检查 Network 面板里 woff2/eot/ttf 请求是否 404
打开 DevTools → Network → 刷新页面 → 筛选 font 或 woff2。重点看这几类请求：
-
GET /fonts/bootstrap-icons.woff2返回 404？说明路径错或文件缺失 -
GET /css/bootstrap.min.css返回 200，但里面@font-face指向的url("../fonts/glyphicons-halflings-regular.woff")实际找不到 - 请求状态是
blocked:cross-origin？那是 CORS 问题，CSS 无法绕过
确认 fonts/ 目录与 CSS 文件的相对位置是否匹配
Bootstrap 的 bootstrap.min.css 里默认用的是相对路径，比如：src: url("../fonts/glyphicons-halflings-regular.woff")。这个 .. 是从 CSS 文件所在目录向上一级找 fonts/。
- 如果你把
bootstrap.min.css放在/static/css/，那fonts/就得在/static/fonts/ - 别依赖构建工具自动拷贝；手动访问
https://yoursite.com/static/fonts/glyphicons-halflings-regular.woff，看能不能直接下载 - 本地用
file://打开 HTML 时，Chrome/Firefox 会拦截字体加载（security.fileuri.strict_origin_policy），必须起本地服务测
IIS 或 Nginx 缺少 woff2 MIME 类型配置
Windows Server + IIS 是乱码高发区：哪怕文件物理存在、路径也对，IIS 默认不认 .woff2，直接返回 404。
- IIS 管理器 → 站点节点 → 「MIME 类型」→ 添加：
.woff2 → application/font-woff2 - 顺手补上：
.woff → application/font-woff、.eot → application/vnd.ms-fontobject、.ttf → font/ttf - 改完不用重启 IIS，但浏览器缓存要清——尤其检查 Network 里请求的还是不是旧路径
跨域场景下字体无法加载，CSS 无解
如果字体放在 https://cdn.example.com/fonts/，而页面在 https://app.example.com，浏览器会报：
Access to font at 'https://cdn.example.com/fonts/glyphicons.woff2' from origin 'https://app.example.com' has been blocked by CORS policy
@font-face 不支持跨域加载字体，加 Access-Control-Allow-Origin 头也没用——这是浏览器硬限制。唯一办法是把字体和页面部署在同一域名下，或改用 SVG 图标替代。
最容易被忽略的一点：乱码不是“字体没渲染”，而是“字体加载失败后系统用默认字体强行解释 Unicode 码点”。所以别急着调 font-family 或改 HTML 编码，先盯死 Network 里那几个字体请求的状态码。
