[Matt MintunParticipant]

Hey! I searched but couldn’t find an answer to this – how do I change the regular cart icon in the navbar? I’d love to change it to a png of a sleigh (you know, being festive and all for the holidays). I have the sleigh uploaded to my site, just not sure how to switch out the <i> code for a code or if there’s a way to make the <i> code actually show a png. Is this possible??

I can provide any details you need if you need it!
Thanks
Matt

[ChristopherModerator]

Hi there,

Please provide us with URL of your site and screen shot to show us how the button should look like .

Thanks.

[Matt MintunParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Matt,

Thank you for providing the screenshots!

To achieve that, add following CSS under Custom > CSS in the Customizer:

.x-cart .x-icon-shopping-cart:before {
    content: '';
    background: url('URL_TO_YOUR_CART_IMAGE') no-repeat center center;
    background-size: contain;
    width: 21px;
    height: 15px;
    margin: -2px -4px;
    display: inline-block;
}

Replace URL_TO_YOUR_CART_IMAGE with the URL to your cart icon.

Hope this helps. 🙂

Thank you!

[Matt MintunParticipant]

I love you guys. That worked perfectly!

[Prasant RaiModerator]

You’re most welcome! Let us know if we can be of any further assistance.

[hipneckParticipant]

How can you change it so it shows a different icon from the x icon library (like the gift icon)?

[DarshanaModerator]

Hi there,

You can use the below CSS for that.

.x-icon-shopping-cart::before {
    content: "\f06b";
}

Hope that helps.

[Author]

Posts