I would like to make a shopping cart icon, and put a number inside it to go iterating according to the products that the customer places in the cart, but I could not do an example: OBs: HTML and CSS, the icon is font-awesome, I'm using Bootstrap 4
HTML
<divclass="content-carrinho d-flex">
<a href=""><span class="fa fa-shopping-cart" aria-hidden="true"></span></a>
</div>
CSS
.content-carrinho a {
padding-right: 40px;
}
.content-carrinho span{
color: white;
}
You can make the icon with a container for the text.
Example: link
You can use the pseudo-element selector called ::after (for old browsers use :after ) to position a text above and use the HTML5 attribute called data- to customize the value, so let's create an attribute custom:
<span data-qtd="0"
Change the zero by the amount you have in the cart and the ::after use content: attr() to get the value of the attribute:
content: attr(data-qtd);
It should look like this:
.content-carrinho a {
padding-right: 40px;
}
.content-carrinho span {
color: #0c0c0c;
font-size: 42px; /* ajuste o tamanho do ICONE aqui*/
position: relative; /* é necessário para enquadrar o ::after */
}
.fa-shopping-cart::after {
font-size: 24px; /* ajuste o tamanho do texto aqui */
top: 10px; /* ajusta no centro e vertical */
content: attr(data-qtd); /*pega o valor do atributo */
text-align: center;
color: white;
position: absolute;
left: 0;
width: 100%;
height: 100%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="content-carrinho d-flex">
<a href="">
<span data-qtd="0" class="fa fa-shopping-cart" aria-hidden="true"></span>
</a>
</div>