How to put text in an icon?

-1

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;
}
    
asked by anonymous 15.09.2017 / 20:40

2 answers

0

You can make the icon with a container for the text.

Example: link

    
15.09.2017 / 20:54
0

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>
    
15.09.2017 / 21:23