必须引入Bootstrap Icons CSS并添加align-middle类才能正确显示和对齐图标；图标可与徽章、交互状态共存；响应式布局应直接给list-group-item加栅格类；关键图标需添加aria-label保障可访问性。
图标加在 list-group-item 里就行，但必须先引入图标字体
不引入 Bootstrap Icons 的 CSS，<i class="bi-house"></i> 只会显示空白方块或小方框——这不是代码写错了，是字体资源根本没加载。必须在 <head> 里加这行：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">。别用旧版链接（比如 @1.8.x），1.9.1 是当前稳定兼容 Bootstrap 5.3+ 的版本。如果项目已用 Font Awesome，两个图标库的
<i> 标签样式可能冲突，此时临时加 style="font-family: 'bootstrap-icons' !important" 能救急，但长期建议统一图标源。
align-middle 不是可选项，是解决文字对齐偏移的刚需
Bootstrap 的 list-group-item 默认是 flex 容器，但图标 <i> 是行内元素，默认按 baseline 对齐，结果就是图标比文字高半截，尤其和中文混排时特别明显。加 align-middle 类是最轻量、最可靠的修复方式：
<li class="list-group-item"><i class="bi-envelope align-middle me-2"></i>联系我</li>。别试图用
vertical-align: top 或 margin-top 手动调，容易在不同字号/行高下失效；也别套 flex 容器再居中——破坏原生语义，还可能影响键盘焦点顺序。
徽章、链接、禁用态这些交互状态，图标都能共存
图标可以和 Bootstrap 原生增强功能叠加使用，只要结构扁平、类名不冲突：
-
list-group-item-action+ 图标：用于可点击项，hover/focus 有背景色反馈，图标自动跟随对齐 -
active或disabled类加在list-group-item上，图标颜色/透明度会同步变化（前提是没用!important锁死颜色） - 徽章放文字后面即可：
<span class="badge bg-primary">新</span>，它会自动右对齐，图标仍在左边，互不影响
i 的 display 或 line-height，可能干扰徽章定位，优先用 Bootstrap 内置类控制间距（如 me-2）。
响应式图标列表组，别用额外容器套网格
想让图标列表在小屏竖排、大屏横排三列？直接给每个 list-group-item 加 col-12 col-md-6 col-lg-3 就行，不用包一层 row 再塞 div。常见错误是写成：
<div class="row"><div class="col-6"><li class="list-group-item">...</li></div></div>——这样多一层 DOM，小屏下容易换行错位。正确做法是让
ul.list-group 外层套 row，每个 li 自带 col-*：<ul class="list-group row"><li class="list-group-item col-12 col-md-6 col-lg-3"><i class="bi-house align-middle me-2"></i>首页</li></ul>。此时需确认父容器有
g-2 或 g-3 控制列间距，否则图标项会挤在一起。
真正容易被忽略的是可访问性：如果图标承载关键含义（比如“删除”用 bi-trash），不能只靠视觉传达。得加 aria-label 或包裹 sr-only 文字，否则屏幕阅读器用户不知道这个项实际功能是什么。
