Javascript 添加篮子图标CSS中篮子中产品的数量

我是一个网络开发新手。我在我的项目引导4中使用

我有以下代码：

预览：

我需要将购物篮中的产品数量添加到我的购物篮图标，如下屏幕所示：

我怎样才能做到

请帮帮我你可以使用这个代码

附加CSS：

.count{
    width: 15px;
    height: 15px;
    border-radius: 15px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    top: 15px;
    left: 60px;
    background: #ff420f;
}

最后，在HTML中：

<li class="nav-item position-relative">
    <a class="nav-link" href="#"><img src="img/basket.jpg" class="pl-lg-4 pr-2">
    <span class="badge badge-primary count">5</span >
    <span class="ml-2 d-lg-none d-xl-inline">Koszyk</span></a>
</li>

别忘了在li.nav项中添加class.position relative您可以使用此代码

附加CSS：

.count{
    width: 15px;
    height: 15px;
    border-radius: 15px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    top: 15px;
    left: 60px;
    background: #ff420f;
}

最后，在HTML中：

<li class="nav-item position-relative">
    <a class="nav-link" href="#"><img src="img/basket.jpg" class="pl-lg-4 pr-2">
    <span class="badge badge-primary count">5</span >
    <span class="ml-2 d-lg-none d-xl-inline">Koszyk</span></a>
</li>

---

别忘了添加class。将relative放在li.nav项中

你想要这个JS或jQuery，或者你只想在你的购物篮中显示5个产品。我只需要添加带数字的圆圈：）我需要html和css-没有JS/jQuery:）你想要这个JS或jQuery，或者你只想在你的购物篮中显示5个产品。我只需要添加带数字的圆圈：）我需要html和css-无js/jQuery:）谢谢，-是格式方面的小问题。“koszyk”跳到下一行-不像谢谢-是格式方面的小问题。“koszyk”跳到下一行-不像