如何在 bootstrap 中的图标顶部添加徽章

Question

所以我想在图标顶部添加徽章，但它总是显示在图标的右侧

截图如下：

这是我的代码：

<li class="nav-item mr-3">
    <a href="#" class="nav-link nav-icon">
        <i class="uil uil-bell">
           <span class="badge badge-light">2</span>
        </i>
    </a>
</li>

我想看起来像这样：

Answer 1

将徽章与图标放在同一层。集：

position: relative; 到导航图标

position: absolute; top: -5px; right: -5px; 到徽章；（顶部和右侧根据您的需要进行调整）

<li class="nav-item mr-3">
  <a href="#" class="nav-link nav-icon">
    <i class="uil uil-bell"></i>
    <span class="badge badge-light">2</span>
  </a>
</li>

Answer 2

您可以使用 position: absolute 来做到这一点。

.iconClass{
  position: relative;
}
.iconClass span{
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<li class="nav-item mr-3" style="width: 40px;">
    <a href="#" class="nav-link nav-icon iconClass">
        <i class="fas fa-bell"></i>
        <span class="badge badge-light">2</span>
    </a>
  </li>

如何在 bootstrap 中的图标顶部添加徽章

How to add badge on top of icon in bootstrap

css

bootstrap-4

icons