图标文字垂直对齐需统一vertical-align: -.125em；Flex容器中改用align-items: center；form-floating验证图标要加position: relative并调整伪元素right值；禁用已移除的form-control-feedback类；绝对定位图标父级须设position-relative。
图标和文字垂直对齐不上？看 vertical-align 值是否一致
Bootstrap Icons 默认设了 vertical-align: -.125em，而普通 <img> 标签默认是 baseline，混排时必然错位。这不是渲染 bug，是 baseline 对齐机制在起作用。
- 所有自定义图片图标（PNG/SVG）必须显式加
style="vertical-align: -.125em;"，和 Bootstrap Icons 保持一致 - 别用
vertical-align: middle—— 它依赖父容器 font-size 的 x-height，换字体或缩放就偏 - 如果用了非 Bootstrap 的 icon font（比如 Font Awesome），先实测
-.125em是否适用；不适用就微调为-0.1em或text-bottom - 在 Flex 容器（如
d-flex）里，vertical-align无效，此时要靠align-items: center控制，且确保图标和文字同级、无额外<span>或<strong>干扰
form-floating 里图标被遮挡？定位参考点没锁到 .form-control
Bootstrap 5 的验证图标（✔️/❌）是伪元素 .form-control:valid::after，默认 right: 0 是相对于 .input-group 容器，不是输入框本身。右侧有密码 toggle 按钮时，图标就叠上去了。
- 给
.form-control加position: relative - 重写伪元素：
.form-control:invalid::after { right: 0.5rem; top: 50%; transform: translateY(-50%); } - 禁用
right: 0，改用带单位的值（如0.5rem），留出按钮安全间距 - 如果用了
form-floating，确保.invalid-feedback紧跟在.form-control后面，中间不能有空格、注释或 wrapper<div>
验证图标总贴右上角或跑偏？别用 .form-control-feedback
.form-control-feedback 类在 Bootstrap 5 中已彻底移除。如果你还在代码里看到它，或者沿用 Bootstrap 4 的 CSS 覆盖规则（比如 .has-feedback .form-control-feedback），它们不会生效，反而会干扰 Flex 布局计算。
- 全局搜索并删掉所有
form-control-feedback字符串，包括 HTML 和 CSS - 验证图标必须走
input-group + input-group-text结构：图标作为input-group-text的直接子元素，不能挂到input上，也不能用伪元素生成 - SVG 图标需设
height: 1em; width: 1em;，否则易上下偏移；Font Awesome 推荐加fa-fw保宽度一致 - JS 控制显隐时，用
classList.toggle('d-none', !isValid)，别用style.display = 'none'—— 后者绕过无障碍树
导航栏或徽章里的图标飘走？检查 position 锚点是否明确
图标类（包括 .badge、.bi）一旦加了 position: absolute，就会向上找最近的 position: relative 祖先。如果父容器没设，它可能跑到 body 边缘，甚至被裁切。
立即学习“前端免费学习笔记（深入）”；
- 徽章或图标所在元素的**直接父级**必须加
position-relative（比如<button class="btn position-relative">） - 用
top-0 end-0 translate-middle组合替代手写right: -8px—— 像素值无法适配不同字号、RTL 和缩放 - 导航项中图标被裁切，大概率是父容器（如
.nav-link）设了overflow: hidden或line-height过小，删掉或增大padding-right - 面包屑首页图标错位，是因为 Bootstrap 默认用
<svg>，你加的<i class="fas fa-home">被.breadcrumb-item::before伪元素干扰，需加.breadcrumb-item:first-child::before { content: none !important; }
input-group 却硬套伪元素）、定位锚点缺失（父级没 position: relative）、以及旧版类名残留（如 form-control-feedback）三者叠加的结果。修的时候得一层层剥开看，而不是只调一个 margin。 
