Равномерное расположение значков независимо от того, есть ли у них значок уведомления или нет

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;
}

Все остальное - начальная загрузка 4.

Answer 1

Попробуйте использовать отрицательное правое поле, равное ширине значка, например:

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

Поиграйте с полем вправо и полями .nav-item или .nav-link, чтобы добраться до места, где вы находитесь.хочу быть.