图标显示方框但字体请求成功，问题在于css冲突导致渲染属性被覆盖；需检查font-family、font-style、display等是否被全局样式误改，并在项目样式中针对性覆盖修复。
图标显示方框但Network里字体请求是200，大概率是CSS冲突
字体文件加载成功，@font-face也生效了，但图标还是□，这时候问题不在资源路径或服务器配置，而在样式层——别的CSS规则覆盖了图标必需的渲染属性。最常见的是全局重置或UI框架里对 i、span 或 [class*="bi-"] 的 font-family、font-style、display 或 unicode-bidi 做了误改。
- 检查是否在全局CSS里写了
i { font-family: "Helvetica", sans-serif; }—— 这会直接干掉bootstrap-icons.css里定义的font-family: "bootstrap-icons"; - 确认没对
[class^="bi-"], [class*=" bi-"]设置font-style: italic，Bootstrap Icons 依赖normal才能正确映射 Unicode 字符 - 某些CSS重置库（如 Normalize.css 后续魔改版）会把
i设为display: inline-block，而图标需要inline才能继承父元素行高和基线对齐逻辑 - 如果用了 Tailwind CSS，注意它默认启用
@layer base中的i样式，可能与.bi冲突；可在tailwind.config.js的content配置中排除node_modules/bootstrap-icons目录，避免 PurgeCSS 错删关键类
如何快速定位冲突来源
打开 DevTools → Elements 面板 → 选中一个 <i class="bi bi-search"></i> 元素 → 右侧 Styles 面板里逐条关闭激活的 CSS 规则，重点盯住 font-family、font-weight、font-style、display 和 unicode-bidi 这几项。一旦某条被禁用后图标恢复，就找到罪魁祸首。
- 优先过滤掉来自
normalize.css、reset.css、tailwind.css、base.css等通用样式表的规则 - 留意是否有
!important强制覆盖了bootstrap-icons.css里的声明（该文件本身不使用!important） - 如果项目用了 CSS-in-JS（如 Emotion），检查是否通过
css函数注入了影响i标签的全局样式
修复时别碰 bootstrap-icons.css 原文件
直接修改第三方 CSS 文件会导致升级困难、构建缓存混乱，且容易漏掉其他同名类。稳妥做法是在自己项目的主样式入口（比如 app.css）末尾加覆盖规则：
i[class^="bi-"],
i[class*=" bi-"] {
font-family: "bootstrap-icons" !important;
font-weight: normal !important;
font-style: normal !important;
display: inline !important;
text-rendering: auto !important;
}
- 只加
!important在必要属性上，不是全盘滥用；上面这几项是图标渲染链中最脆弱的环节 - 避免写成
i.bi—— Bootstrap Icons 的选择器是属性匹配，不是 class 名字匹配，i.bi会漏掉<i class="bi bi-search me-2"></i>这类多类名结构 - 如果项目已用 PostCSS，可用
postcss-import把修复规则作为独立 patch 文件引入，便于团队协作维护
响应式场景下图标错位其实是同一类问题
图标在小屏上偏上/偏下/截断，表面看是布局问题，根子常是 CSS 冲突导致 line-height 或 vertical-align 失效。比如某个组件库给 .list-group-item 加了 line-height: 1，而图标默认按 1.5 行高设计，就会视觉下沉。
- 不要靠
transform: translateY()微调——它破坏可访问性焦点位置，屏幕阅读器无法感知真实渲染坐标 - 推荐组合：给图标加
align-text-top+fs-5（即font-size: 1.125rem），再用me-2控制右侧间距，比硬写margin-top: -2px更稳定 - 如果用了 Flex 布局（如
list-group-item d-flex align-items-center），图标对齐由align-items控制，此时vertical-align完全无效，强行加只会制造困惑
::part() 或 :host 深度穿透——那种情况就得换 SVG 内联方案了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
