Bootstrap侧边菜单图标添加教程

不用改 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 容器高度塌陷
• 图标容器（即 ）加 flex-shrink: 0，防止被压缩变形
• 别在 @media 里单独重置图标 font-size，用 rem 或 em 自适应更可靠

复杂点在于图标状态联动——比如选中项要高亮图标，就得靠 .nav-link.active > i 这种组合选择器，而不是依赖 JS 操作 class。容易被忽略的是 active 样式没穿透到子图标，结果文字变色了，图标还是灰色。

今天关于《Bootstrap侧边菜单图标添加教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！