Necesito agregar un badge
con la cantidad de productos que tengo en un shopping cart, no puedo lograr que este quede alineado correctamente, ni que el texto los iconos no se superponga entre si.
Algún conocedor de CSS
que me pueda brindar una mano? busqué ejemplos pero no pude aplicar ninguno a mi situación.
.sidebar-social li {
text-align: center;
width: 31.9%;
margin-bottom: 3px!important;
display: inline-block;
font-size: 10px;
padding: 0;
}
.sidebar-social i {
display: block;
margin: 0 auto 10px auto;
width: 32px;
height: 32px;
margin: 10px auto 0;
line-height: 32px;
text-align: center;
font-size: 20px;
color: #444444;
margin-top: 0;
padding-top: 5px;
}
.sidebar-social a {
text-decoration: none;
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
}
.sidebar-social a span {
color: black;
font-size: 15px;
padding: 5px 0 10px 0;
display: block;
text-transform: uppercase;
font-family: 'Montserrat';
letter-spacing: 1px;
}
<div class="cart-menu align-items-center d-flex">
<div class="sidebar-social">
<ul>
<li>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fas fa-arrow-circle-right"></i><span>Login</span></a>
</li>
<li>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fas fa-user"></i><span>Registrate</span></a>
</li>
<li>
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fas fa-shopping-cart"></i><span>Carrito</span></a>
<span id="cart_menu_num" data-action="cart-can" class="badge rounded-circle">5</span>
</li>
</ul>
</div>
</div>
Así es como queda:
Como se puede ver, el badge
queda lejos del carrito en lugar de quedar en su posición.
Y así escomo debería quedar:
Gracias de antemano!