图标必须嵌套在 dropdown-item 的 <a> 或 <button> 内部，否则点击失效、键盘不可聚焦、屏幕阅读器无法识别；推荐用 <a class="dropdown-item"><i class="bi bi-download align-middle"></i> 下载</a>，并确保 bootstrap-icons.css 正确加载且类名带 bi 前缀。
dropdown-item 里加图标，必须把 <i> 或 <svg> 放在可交互元素内部，否则点击失效、键盘不可聚焦、屏幕阅读器无法识别。
图标必须嵌套在 dropdown-item 的可交互标签内
常见错误是把图标写在 <ul class="dropdown-menu"> 里但脱离 <a> 或 <button> ——比如这样：
<ul class="dropdown-menu"> <li><i class="bi bi-download"></i> 下载</li> </ul>
这会导致图标区域不可点击、无 hover/focus 样式、语义断裂。正确写法是：
- 用
<a class="dropdown-item">包裹图标和文字（推荐，语义清晰、默认可聚焦） - 或用
<button class="dropdown-item">（适合 JS 驱动行为） - 图标和文字必须同级，都在该标签内部，例如：
<a class="dropdown-item"><i class="bi bi-download align-middle"></i> 下载</a>
align-middle 是解决图标上下偏移最稳的方式
Bootstrap Icons 默认按 baseline 对齐，视觉上常比文字“高一点”或“低一点”，尤其在 dropdown-item 这种行高为 1.5 的环境中。
- 别手动写
vertical-align: middle或margin-top——不同字体渲染差异大，Safari 和旧 Edge 容易错位 - 直接加 Bootstrap 自带的
align-middle类，它基于 rem 单位计算，兼容性好 - 如果图标仍略偏，可叠加
me-2控制右侧间距，避免文字紧贴图标 - 禁用
transform: translateY()：会影响焦点框定位，对无障碍不友好
CDN 引入顺序和类名前缀不能漏
图标不显示？90% 是引入问题或类名写错。
-
bootstrap-icons.css必须在 Bootstrap 主 CSS 之后、JS 之前加载 - 类名必须带
bi前缀，例如bi bi-download；只写bi-download不会生效 - 本地部署时检查 Network 面板：若
fonts/bootstrap-icons.woff2返回 404，说明路径配置错误 - React 项目中动态渲染时，别拼接字符串 HTML，用 JSX 直接嵌套，确保图标组件被 React 正确挂载
dropdown-item 的 <a> 或 <button> 内部，它就不是菜单项的一部分——既不能键盘操作，也无法被自动化测试识别。 
