Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Styling the shopping cart icon and quantity


Capriva

Question

Site URL: https://capriva.shop

Hey,

is it possbile to style the shopping cart icon without actually replacing it? I know you can add custom icons with CSS but this just brings me more trouble because I would need seperate versions for dark and ligth backgrounds. 

The standard shopping cart icon is fine for me, I just would like to have a bold version of it.

I also want change the color and background of the little quantity numbers besides the shopping cart. I want to have a circle around the number (still deciding on the color) and want the text to be white.

I managed to kinda get the circle right with the following CSS, but I dont now how to edit the text. 

.icon-cart-quantity {
  display: inline-block;
  background-color: green;
    vertical-align: top;
    min-width: 1em;
    margin-top: 0em;
    margin-left: 1em;
    border-radius: 1em;
    padding: .5em;

}

 

Would be greatly appreciated if someone could help out with this!

Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

Add to Design > Custom CSS

/* bold cart icon */
svg.icon.icon--cart {
    stroke-width: 3;
}
/* quantity color */
span.sqs-cart-quantity {
    color: red;
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...