Bootstrap侧边菜单图标需用fas前缀+me-2间距+vertical-align:middle对齐，避免baseline偏移；推荐flex布局下.nav-link设align-items:center，图标加flex-shrink:0防压缩。
怎么让Bootstrap侧边菜单项显示Font Awesome图标
直接在 <li> 或 <a> 里加 <i class="fa fa-home"></i> 就行，但得确保图标和文字垂直对齐、间距合理，否则会错位或挤在一起。
常见错误是只加图标不调样式，结果图标上浮、文字基线偏移，或者小屏幕下图标被截断。
- Bootstrap 5 默认用
flex布局侧边栏（如.nav-flex-icons），<i>默认是inline，容易和文字不对齐 - Font Awesome 6 推荐用
<i class="fas fa-home"></i>（注意fas），别漏了前缀；FA5 则是fa fa-home - 图标默认比文字略大，建议统一设
font-size: 0.9em，再用vertical-align: middle对齐
为什么图标总卡在文字上方或左边贴太紧
本质是 inline 元素的 baseline 对齐问题，不是 Bootstrap 或 FA 的 bug，而是 CSS 默认行为。
典型现象：<i class="fas fa-home"></i> 首页 中图标顶部比“首”字高一截，或者图标和文字之间没空隙。
立即学习“前端免费学习笔记（深入）”；
- 加
vertical-align: middle到<i>上，比top或baseline更稳 - 图标和文字间加
margin-right: 0.5rem（别用固定像素，适配性差） - 如果侧边菜单用了
nav-link，它自带padding，图标要放在<a>内部最前面，别包在额外<span>里
Bootstrap 5 + Font Awesome 6 的最小可行写法
不用改 JS、不碰 SCSS 变量，纯 HTML + 一行额外 CSS 就能跑通。
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-home me-2"></i> 首页
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-user me-2"></i> 用户管理
</a>
</li>
</ul>
关键点：me-2 是 Bootstrap 5 的 margin 工具类（等价于 margin-right: 0.5rem），比手写 CSS 更轻量；fas 必须写对，FA6 不再支持无前缀的 fa。
- CDN 引入顺序不能错：先 FA CSS，再 Bootstrap CSS，否则图标可能被覆盖
- 如果用自建图标字体，确认
@font-face路径正确，且未被 CSP 策略拦截 - 暗色模式下图标颜色可能变灰——加
color: inherit保证随文本色变化
移动端折叠后图标消失或错位怎么办
不是图标丢了，是 Collapse 动画过程中 height 和 overflow 导致图标渲染异常，尤其在 Safari 上。
典型表现：点击展开菜单，图标位置跳动一下，或第一次打开时图标不显示。
- 给
.nav-link加display: flex; align-items: center，避免 flex 容器高度塌陷 - 图标容器（即
<i>）加flex-shrink: 0，防止被压缩变形 - 别在
@media里单独重置图标font-size，用rem或em自适应更可靠
复杂点在于图标状态联动——比如选中项要高亮图标，就得靠 .nav-link.active > i 这种组合选择器，而不是依赖 JS 操作 class。容易被忽略的是 active 样式没穿透到子图标，结果文字变色了，图标还是灰色。
