Как получить подсчет ИЛИ одиночную точку на значке уведомления, когда приходит уведомление в Django

Я создал API уведомлений с помощью django-notifications. и уведомления успешно отправляются с помощью nofiy.send.

Но теперь я хочу добавить счетчик или точку на значок уведомления.

для этих 3 иконок я создал отдельный файл icon.html и вызываю его на каждой html странице. а уведомления приходят на другой файл notifications.html

enter image description here

Здесь icon.html

{% if request.session.is_staff %}
<div class="col">
    <a href="{% url 'my-account' %}">
        <h4> <span class="fas fa-user-tie"></span></h4>
    </a>
</div>
<div class="col">
    <a href="{% url 'notifications' %}">
        <h4><span class="fas fa-bell"></span></h4>
    </a>
</div>
<div class="col">
    <div class="dropdown p-10">
        <a id="dropdownMenuButton1" style="cursor: pointer;" data-bs-toggle="dropdown" aria-expanded="false">
            <h4><span class="fa fa-envelope"></span></h4>
        </a>
        <ul class="dropdown-menu m-10" aria-labelledby="dropdownMenuButton1" style="margin:2px !important">
            <li>
                <a class="dropdown-item" href="{% url 'email-logs' %}" style="padding: 5px !important;">
                    &nbsp;&nbsp;Email Logs
                </a>
            </li>
            <li>
                <a class="dropdown-item " href="{% url 'sms-logs' %}" style="padding: 5px !important;">
                    &nbsp;&nbsp;SMS Logs
                </a>
            </li>
        </ul>
    </div>
</div>

{% else %}
<div class="col" align="right">
    <a href="{% url 'my-account' %}">
        <h4> <span class="fas fa-user-tie"></span></h4>
    </a>
</div>
<div class="col" align="right" style="padding-right:30px !important">
    <a href="{% url 'notifications' %}">
        <h4><span class="fas fa-bell"></span></h4>
    </a>
</div>


{% endif %}

Уведомления приходят на notifications.html. вот notifications.html

{% for notification in notifications %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body p-2">
                    <div class="row device">
                        <div class="col-1">
                            <h3 class="text-center"><span class="fas fa-bell text-warning"></span></h3>
                        </div>
                        <!-- {{notifications}} -->
                        <div class="col-10">
                            <b>{{notification.verb}}</b><br>
                            {{notification.description}}<br>
                            <small>Time: {{notification.timestamp|custom_date_time}}</small>
                        </div>
                        <div class="col-1">
                            <a href="">
                                <h3 class="text-center"><a href="{% url 'notification-delete' %}?id={{notification.id}}"><span class="fas fa-trash text-danger"></span></a></h3>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><br>
    {% endfor %}

Как мне избавиться от него.

Заранее спасибо!!!

Вернуться на верх