Bootstrap 5 中 InputGroupText 默认不显示图标，因其仅渲染文字容器；需手动引入 Bootstrap Icons 并用 包裹图标，配合 d-flex align-items-center 或精确 line-height/padding 对齐。
Bootstrap 5 中 InputGroupText 不显示图标怎么办
直接说结论：原生 InputGroupText 只负责渲染文字容器，不带图标；想加图标得手动引入图标字体（如 Bootstrap Icons）或 SVG，并用 font-size、line-height 和 padding 对齐。常见错误是把 直接塞进 InputGroupText 却没调样式，导致图标塌陷、偏移或不可见。
典型场景：登录表单里邮箱输入框前加 @ 或用户图标，密码框前加锁形图标。
- 确保已加载 Bootstrap Icons（推荐 CDN）：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
-
InputGroupText内部必须用行内元素包裹图标，比如，不能只写类名不包标签 - 默认
InputGroupText高度和输入框不完全一致，需加class="d-flex align-items-center"或手动设line-height: 1.5防图标上下错位
input-group-text 与 input-group-prepend 的区别（Bootstrap 4 → 5 迁移必看）
Bootstrap 5 彻底移除了 input-group-prepend 和 input-group-append，统一用 input-group-text + input-group 布局。如果你从 v4 升级后图标位置乱了，大概率是还留着旧类名。
关键变化：
- v4 写法：
- v5 正确写法：
，且必须作为input-group的直接子元素 - 多个前缀/后缀要并列写，不能嵌套：@.com
图标和文字混排时垂直对齐总出问题
哪怕用了 bi 图标，也常出现图标比文字高半截、或贴顶。根本原因是图标字体的 vertical-align 默认按基线对齐，而容器又没设明确高度基准。
- 最稳解法：给
input-group-text加class="d-flex align-items-center"，强制子元素居中对齐（前提是内部用或包裹图标） - 如果不用 Flex，可加内联样式：
style="line-height: calc(1.5em + 0.75rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem;"（对应 Bootstrap 5 默认form-control高度） - 避免用
margin-top硬调——响应式断点下容易失准 - SVG 图标需额外设
height: 1em; width: 1em; vertical-align: -0.125em;才能和文字自然贴合
自定义颜色或背景时覆盖不了默认样式
Bootstrap 5 的 input-group-text 带有较重的 CSS 优先级（比如 background-color: #e9ecef），直接写 style="background: #007bff" 可能被覆盖，尤其在深色主题或自定义 CSS 文件后加载时。
- 优先用工具类：
bg-primary text-white比内联background更可靠 - 若需精细控制，加
!important是最快验证方式，但上线前建议抽成 CSS 规则并提高选择器权重，例如：.my-input-group-text { background-color: #007bff !important; } - 注意边框：默认
input-group-text和form-control共享边框颜色，单独改前者背景时，常需同步设border-color否则左右出现“白缝”
图标对齐这事看着小，但实际调试时花十分钟查 line-height 和 display 类型很常见——尤其是团队里有人习惯用 SVG、有人用 icon font，没统一对齐逻辑就容易反复返工。
