bootstrap 5 图标重叠主因是 vertical-align 不一致、display 被强制重置及 svg 尺寸未归一化，需统一设置 vertical-align: -.125em、display: inline-block 和 height/width: 1em。
Bootstrap 5 的 CSS 会覆盖原有图标样式，不是因为“加载顺序错了”，而是它重置了 i、svg、img 等元素的默认排版行为，尤其在 inline 元素混排时，vertical-align 和 display 的隐式变化直接导致重叠。
检查是否被 Bootstrap 的 icon 通用规则劫持
Bootstrap 5 默认注入了针对图标类名的强制重置规则：
i[class^="bi-"], i[class*=" bi-"] { font-family: "bootstrap-icons" !important; display: inline !important; }
如果你的自定义图标（比如 <i class="icon-user"></i>）也匹配 i[class*=" bi-"]（注意空格），就会被误判并强设为 inline + font-family，从而和文字基线错乱、上下堆叠。
- 打开 DevTools → Elements 面板，选中你的图标元素，看 Styles 面板里是否有一条来自
bootstrap.min.css的display: inline !important被激活 - 若匹配命中，立刻在自定义 CSS 中加更具体的选择器覆盖：
i.icon-user { display: inline-block !important; vertical-align: middle; } - 不要只靠删掉 Bootstrap 的图标规则——它可能藏在
reboot.scss或utilities/_display.scss里，改源码不现实
vertical-align 不一致是重叠主因
Bootstrap Icons 默认设 vertical-align: -.125em，而你原来的 PNG/SVG 图标若没显式声明，就走浏览器默认的 baseline，两者混排必然错位、视觉重叠。
- 所有非 Bootstrap Icons 的图标，必须统一加
style="vertical-align: -.125em;"或写进 CSS：img.icon, svg.icon { vertical-align: -.125em; } - 别用
vertical-align: middle——它依赖父容器 font-size 的 x-height，换字体或缩放就偏移 - 在 Flex 容器（如
d-flex）里vertical-align完全无效，此时必须用align-items: center，且确保图标和文字同级、无额外 wrapper
SVG 图标高度未归一化也会引发重叠
未设尺寸的 <svg></svg> 默认按内容撑高，不同 SVG 内容高度差异大，导致行高不一致、相邻图标上下错位甚至压在一起。
- 统一加
height: 1em; width: 1em;到所有 SVG 图标上（内联或 CSS） - 如果用了 Font Awesome，加
fa-fw类保宽度一致，避免左右晃动引发的视觉重叠 - 若图标作为伪元素（如
::before）插入，需确认父元素font-size稳定，否则1em值浮动，重叠位置飘忽
form-floating 或 input-group 里图标被挤成一行
当图标塞进 form-floating 或 input-group 时，Bootstrap 会重设子元素的 position 和 z-index，若你原有图标没加 position: relative，就可能被其他元素层叠遮挡，看起来像“重叠”。
- 给图标父级（如
.input-group-text或图标直接包裹的div）加position: relative - 禁用已废弃的
.form-control-feedback类——它在 Bootstrap 5 中彻底移除，残留代码会干扰 Flex 布局计算，造成定位塌陷 - 验证图标（
:valid::after）默认right: 0是相对于.input-group，不是输入框本身；右侧有密码 toggle 时，图标就叠上去了——应改为right: 0.5rem并配top: 50%; transform: translateY(-50%)
真正难处理的不是“怎么加样式”，而是图标混用场景下 vertical-align、display、position 三者联动失效——一旦某个环节漏设（比如 SVG 忘了 1em，又在 Flex 里没关 vertical-align），重叠就会在特定缩放或字体下突然出现，且极难复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
