如何在引导程序中的图标顶部添加徽章

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: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>