input-group-text 本身只渲染文字容器，不带图标；图标必须手动引入（如 Bootstrap Icons）并用 <i> 或 <svg> 显式写入，且需加载对应 CSS 文件、设 d-flex align-items-center 垂直居中、匹配尺寸类。
Bootstrap 5 中 input-group-text 不显示图标？
直接说结论：input-group-text 本身只渲染一个文字容器，不带图标；图标必须手动引入（如 bootstrap icons），且得用 <i> 或 <svg> 显式写进去。
常见错误是把 <i class="bi bi-search"></i> 直接塞进 input-group-text，但没调样式——结果图标塌陷、偏上、或干脆看不见。
- 确保已加载 Bootstrap Icons（推荐 CDN）：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet"> -
input-group-text必须是<div class="input-group">的直接子元素，不能嵌套在其他 div 里 - 图标标签（
<i>或<svg>）必须包裹在input-group-text内，不能只写类名不包标签
图标垂直居中总出问题？
哪怕用了 bi 图标，也常出现图标比文字高半截、或贴顶——根本原因是图标默认按基线对齐，而 input-group-text 默认是 display: block，没设对齐基准。
最稳解法：给 input-group-text 加 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高度） - 避免依赖
vertical-align—— 在 flex 容器里它无效，且 Bootstrap 5 已弃用该方式 - 图标需有明确
font-size（如1.125rem），否则会随父级缩放失衡
form-control-sm / form-control-lg 下图标错位怎么办？
Bootstrap 的尺寸类（如 form-control-sm）只作用于 form-control，不会自动同步影响 input-group-text，导致小号输入框配大图标、头重脚轻。
实操建议是为不同尺寸配套调整图标容器：
- 对
form-control-sm：给input-group-text加p-1和font-size: 0.875rem - 对
form-control-lg：用p-2+font-size: 1.25rem - 更稳妥的是自定义 CSS 类，例如：
.input-group-icon-sm > .input-group-text统一控制 - 别用
transform: scale()缩放图标——会影响点击热区坐标，高 DPI 屏幕下还会模糊
React 项目里图标消失？
常见于用 react-bootstrap 但没正确导入图标组件，或把图标写在 FormControl 的 placeholder 之类属性里（那只是字符串，不是 DOM 节点）。
关键点：
- 图标必须作为真实 React 元素插入，比如
<InputGroup.Text><i className="bi bi-user"></i></InputGroup.Text> - 确认
react-bootstrap版本与 Bootstrap Icons 版本兼容（v2.x 对应 Bootstrap 5） - 不要用伪元素（如
::before）生成图标——辅助技术无法感知，也不响应交互
复杂点在于：图标对齐不是纯 CSS 问题，而是布局模型（flex）、字体度量、行内元素基线、以及尺寸类作用域的叠加结果。容易被忽略的是——input-group-text 和 form-control 是两个独立元素，它们的高度、padding、line-height 都得各自协调，不能只调一边。
