How to put text on an icon?

Asked

Viewed 1,190 times

-1

I would like to make a shopping cart icon, and put a number inside it to iterate according to the products that the customer puts in the cart, but I could not do, an example: Note: HTML and CSS, the icone is font-awesome, I’m using Bootstrap 4

inserir a descrição da imagem aqui

HTML

 <div class="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;
}
html css
  • 2

    It depends on what this icone is, is a source of fontawsome or gliph? is a SVG? is an image with <img>? Give details, there are many ways to do the same thing as it will depend on the technology you initially used to be able to provide you with an answer that will specifically serve your case.

  • is a font-awesome, sorry not to mention the question

  • Post what you have done so far, only the HTML part of such icone.

  • Ready, the image in the post is an example

  • is using some other framework that I don’t know about? what does it mean d-flex? This may conflict with any solution I provide in a response, you better read the recommendations for how to formulate an example: https://answall.com/help/mcve, if not people will get you several solutions most can fail by conflicting with something that has on your site and then we will stay all day until something works.

  • Even though I am not sure if you will conflict, I have made an answer, try https://answall.com/a/237805/3635, if it works blz, otherwise follow what I said in the previous comment.

  • Thanks for the topic of Creating Examples, I’ll give a read, it’s my second post here, to half lost, but d-flex is a property of Bootstrap 4 that leaves the flex container. Thanks for the help, I’ll try to make an example and come back for a feedback

Show 2 more comments

2 answers

0

0

You can use the pseudo-element selector called ::after (for older browsers use :after) to position a text above and use the HTML5 attribute called data- to customize the value, so let’s create a custom attribute:

<span data-qtd="0"

Exchange the zero for the quantity you have in the trolley and in the ::after use content: attr() to take the value of the attribute:

content: attr(data-qtd);

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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.