图标必须内嵌在标签内并包裹文字，用me-1或inline svg加fill:currentcolor确保颜色同步，扩大热区至≥44px并用align-middle对齐，禁用text-transform避免偏移。
直接用 <i></i> 或 <svg></svg> 塞进 @#@#@#@#@#@#@#@#@#@0
<svg></svg>，同样要内联在 <a></a> 里，并设 width 和 height（如 width="16" height="16"）me-1（Bootstrap 5）或 margin-right: 0.25rem
<i></i> 图标颜色不随 nav-link 激活状态变？因为 fill 没继承
<i class="bi bi-house"></i> 默认靠字体渲染，其颜色由 color 控制，但某些旧版图标字体（如 FA 4）用伪元素实现，不响应父级 color 变化。而 <svg></svg> 的 fill 默认也不继承 color。
- 最稳方案：加全局样式
svg { fill: currentColor; }，让 SVG 自动跟随文字色 - 如果用
<i></i>，确保引入的是 Bootstrap Icons SVG 版本（bootstrap-icons@1.11.3），且没手动写死fill或color - 别写
.nav-link.active i { color: #0d6efd; }——硬编码色值，换主题就失效 - 检查是否误加了
style="fill: #6c757d"这类内联样式，删掉，让它纯粹靠currentColor
移动端图标被截断、点不中？热区不足 + 行高错位
Bootstrap 的 nav-link 在 xs 尺寸下 padding 缩小到 0.5rem 1rem，但图标尺寸没缩放，容易贴边溢出；同时默认热区只覆盖文字区域，用户点图标边缘无响应。
- 给
<a></a>加py-2或px-3手动扩大点击区域，确保 ≥ 44px - 图标对齐用
align-middle（针对<i></i>）或align-text-top（配合me-2），别用vertical-align: middle或transform - 如果图标仍视觉下沉，微调
margin-top: -1px比强行改line-height更可控 - 禁用
text-transform: uppercase类影响图标位置——它会改变基线，连带图标偏移
真正麻烦的不是加图标，而是让图标在所有状态（悬停、激活、禁用、小屏折叠、高对比度模式）下都保持可访问、可点击、颜色同步——这些细节不测到真机+读屏器，很容易漏掉。
