均匀放置图标，无论是否带有通知徽章

Question

下图将不会有太多，但这更清楚地显示了它。我正在寻找几个字体超赞的图标，上面覆盖着一个引导标志，以指示通知。我遇到的两个问题是：

1. 每个图标都带有通知徽章时，它们之间的间距太大

2. 当图标没有通知徽章时，它们将不再像一组图标一样均匀分布。

html：

<div class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <div class="nav-item">
        <a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
            <i class="fa fa-lg fa-bell"></i>
            <span class="notification-badge badge badge-danger">1</span>
        </a>
    </div>
    <div class="nav-item">
        <a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
            <i class="fa fa-lg fa-calendar-alt"></i>
            <span class="notification-badge badge badge-danger">4</span>
        </a>
    </div>
    <div class="nav-item">
        <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
           aria-expanded="false">
            <i class="fas fa-lg fa-list-alt notification-icon"></i>
            {{--<span class="notification-badge badge badge-danger">2</span>--}}
        </a>
    </div>
    <div class="nav-item">
        <a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
            <i class="fa fa-lg fa-comment"></i>
            {{--<span class="notification-badge badge badge-danger">1</span>--}}
        </a>
    </div>
    <div class="nav-item">
        <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
           aria-expanded="false">
            <i class="fas fa-lg fa-envelope notification-icon"></i>
            <span class="notification-badge badge badge-danger">2</span>
        </a>
    </div>
</div>

CSS：

span.notification-badge {
  position: relative;
  top: -10px;
  right: 10px;
  border: $white 1px solid;
}

其余都是现成的Bootstrap 4。

Answer 1

尝试使用负的右边距（即徽章的宽度），例如：

span.notification-badge {
    position: relative;
    top: -10px;
    right: 10px;
    border: $white 1px solid;
    margin-right: -18px;
}

使用右边距和.nav-item或.nav-link的边距来找到自己想要的位置。