如何在Bootstrap导航的Font Awesome铃铛图标右上角添加服务端数字徽章

没问题，这事儿很容易搞定！你只需要把带服务端数字的<span>徽章元素放在铃铛图标旁边，再配合一点简单的自定义CSS来定位它，就能实现类似Android应用的角标效果了。

修改后的HTML布局 #

首先调整你的导航项代码，把徽章<span>放在Font Awesome铃铛图标之后，同时给父级的nav-link加定位参考类：

<li class="nav-item dropdown">
  <a href="#" id="navbar-inquiries-dropdown" class="nav-link dropdown-toggle position-relative" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
    <i class="fas fa-bell"></i>
    <!-- 服务端渲染的徽章，这里用Laravel Blade语法示例 -->
    @if($number > 0)
      <span class="badge badge-pill badge-danger notification-badge">{{ $number }}</span>
    @endif
  </a>
  <ul class="nav-item dropdown-menu" role="menu" aria-labelledby="navbar-inquiries-dropdown">
    <li class="nav-item">
      <a class="dropdown-item" href="{{ route('inquiry.index') }}"> Requests </a>
    </li>
  </ul>
</li>

添加自定义CSS样式 #

接下来添加CSS把徽章精准定位在铃铛图标的右上角，调整细节让它更协调：

/* 定位徽章到右上角 */
.notification-badge {
  position: absolute;
  top: 2px; /* 可根据导航栏高度调整上下位置 */
  right: 2px; /* 可根据导航栏宽度调整左右位置 */
  font-size: 0.7rem;
  padding: 2px 6px;
}

关键细节说明 #

• 给nav-link加Bootstrap内置的position-relative类，让徽章的绝对定位以这个链接为参照，不会乱跑。
• 用badge-pill实现圆角徽章，badge-danger是红色主题（你可以换成badge-warning、badge-info等其他Bootstrap徽章类改颜色）。
• 加入@if($number > 0)的判断，没有未读通知时自动隐藏徽章，避免显示空/0的尴尬情况。
• 自定义notification-badge类微调位置和字体大小，你可以根据自己的导航栏样式调整top和right的值，让徽章刚好落在铃铛图标右上角。

这样修改后，服务端渲染的$number就会正确显示在铃铛图标右上角，完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者Jaan