input-group-text本身不渲染图标，仅提供文字容器；图标须手动引入Bootstrap Icons并用或<svg>显式嵌入，配合d-flex align-items-center垂直居中，且必须确保CSS文件加载、结构平级、无障碍语义。
input-group-text 本身不渲染图标，只提供一个文字容器；图标必须手动引入（如 Bootstrap Icons），再用 <i> 或 <svg> 显式写进去，并加 d-flex align-items-center 垂直居中。
必须确保 Bootstrap Icons 已加载
没加载图标字体，<i class="bi bi-search"></i> 就是空白。推荐用 CDN：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
- 别只复制图标类名就完事——得有对应 CSS 文件支撑
- React 项目里如果用了
react-bootstrap，它不自动带图标，仍需单独引入图标 CSS 或用组件库提供的图标组件 - 检查浏览器开发者工具的 Network 面板，确认
bootstrap-icons.css请求状态是 200
input-group-text 必须是 input-group 的直接子元素
结构错一层，Flex 布局就失效，图标会塌陷或错位。正确写法：
<div class="input-group"><br> <span class="input-group-text d-flex align-items-center"><i class="bi bi-envelope"></i></span><br> <input type="email" class="form-control"><br></div>
- 禁止嵌套：
<span class="input-group-text"><div><i></i></div></span>——<i>不再是input-group-text的直接子元素，对齐失效 -
input-group-text和form-control必须平级，都在input-group下 - 不要用已废弃的
input-group-addon（Bootstrap 5+ 已移除）
垂直居中总出问题？关键在 align-items: center
图标默认按基线对齐，而 input-group-text 默认是 display: block，导致图标比文字高半截、光标偏移（尤其 Safari）。最稳解法就是强制 Flex 对齐：
- 给
input-group-text加d-flex align-items-center—— Bootstrap 5.3+ 默认已含，老版本必须手动加 - 避免用
vertical-align: middle：在 Flex 容器里无效，且 Bootstrap 5 已弃用该方式 - 图标需有明确
font-size（如1.125rem），否则随父级缩放失衡；form-control-sm下建议配font-size: 0.875rem+p-1
右图标点击没响应？事件要绑在 input-group-text 上
图标本身是纯展示元素，<i> 没默认交互行为。想实现“点击清空”或“切换密码可见”，得把事件监听器加在包裹它的 input-group-text 上：
<span class="input-group-text d-flex align-items-center cursor-pointer" onclick="clearInput()"><br> <i class="bi bi-x"></i><br></span>
- 别只给
<i>加onclick—— 它可能被 padding 或对齐样式挤到可点击区域之外 - 加
cursor-pointer提供视觉反馈 - 移动端注意热区大小，至少保证
input-group-text高度 ≥ 44px，否则点击困难
最容易被忽略的是：图标是否真正作为 DOM 节点存在。写在 placeholder 里、用伪元素模拟、或靠 background-image 实现的“图标”，都无法被屏幕阅读器识别，也不支持点击事件绑定——语义和交互，都得从真实 HTML 元素开始。
