Adding icon in css

Asked

Viewed 145 times

-1

I’m making a website at work where I needed to make a bootstrap boot, with a "see more" style when clicking to open the card and the button turning "see less", the ways I found bugged the button if you clicked too fast, turning to see more before it even closes. The solution I found was to use before with content and Aria-Expanded, like this:

.Produtos .container_produtos .conteudo .card #botao[aria-expanded="false"]:before{
    content:" Ver mais ";
  }
  
.Produtos .container_produtos .conteudo .card #botao[aria-expanded="true"]:before{
    content:" Ver menos ";
  }

In front of the view more there is an icon of +, and when the card opens, the customer would like it to flip a -, is there a way to turn an icon using before? or that uses Aria Expanded to keep you from bugging

html css3 twitter-bootstrap

  • How about " + Ver mais " :D, Guy without your code doesn’t help you much, put in the Bootstrap component that you’re using and tell me which version of Bootstrap it is.

  • I would use javascript to make that happen. And a very good way to use these icons is the awesome font, because the icons are chosen according to the class of that element: https://fontawesome.com To change the class you only need to use the property. jquery toggleClass

1 answer

0

I was able to find a solution with just css. I found a way to make you see more and see less change along with the icon, but it defaced the text source by being only inside the content of before, so I joined after and before and it worked, changes the text and icon of the card without bugging successfully.

.Produtos .container_produtos .conteudo .card .botao[aria-expanded="false"]:after{
    font-family: "Font Awesome 5 Free";
    content: "\f055";
    font-weight: 900;
}
.Produtos .container_produtos .conteudo .card .botao[aria-expanded="false"]:before{
    content: "Ver mais";
}

.Produtos .container_produtos .conteudo .card .botao[aria-expanded="true"]:after{
    font-family: "Font Awesome 5 Free";
    content: "\f056";
    font-weight: 900;
}
.Produtos .container_produtos .conteudo .card .botao[aria-expanded="true"]:before{
    content: "Ver menos"
}

Browser other questions tagged html css3 twitter-bootstrap

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