Customize Shopping Cart Icon with IMAGE

Hello, 

I would like to apply my custom icon as a .png (or anything that works really) to my shopping cart icon. I have tried a few different versions of code from YT videos/forums, but nothing is working for me. The closest I got was the code below. The icon appeared in the background but the shopping cart icon remained as well. Any feedback would be great!

Thanks. 

 

// Custom Cart Icon //

.header .header-actions-action--cart .icon {
  background: url(https://static1.squarespace.com/static/66a036752d0ce27755ed7c26/t/66bd6076cfbeaf4c68532124/1723687030952/pack3.pngIMAGE-URL-HERE.png) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
}

@JT4 Hi! Can you share your site URL for context? 

Yes! 

URL: https://www.jaackoneil.com/
password: hi

On 8/15/2024 at 9:00 PM, JT4 said:

Yes! 

URL: https://www.jaackoneil.com/
password: hi

Change your code to this

.header .header-actions-action--cart .Cart-inner {
  background: url(https://static1.squarespace.com/static/66a036752d0ce27755ed7c26/t/66bd6076cfbeaf4c68532124/1723687030952/pack3.pngIMAGE-URL-HERE.png) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
    background-repeat: no-repeat;
}
.header .header-actions-action--cart svg {
    visibility: hidden;
}

On 8/17/2024 at 3:43 AM, tuanphan said:

Change your code to this

.header .header-actions-action--cart .Cart-inner {
  background: url(https://static1.squarespace.com/static/66a036752d0ce27755ed7c26/t/66bd6076cfbeaf4c68532124/1723687030952/pack3.pngIMAGE-URL-HERE.png) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
    background-repeat: no-repeat;
}
.header .header-actions-action--cart svg {
    visibility: hidden;
}

i did this but the cart seems to be smaller/offset slightly to the rest of the header items (emerssed.com pass:27)

On 9/8/2024 at 7:14 AM, connigher said:

 

you can change contain to a fixed size

background-size: 50px;