Okay
  Public Ticket #4511473
Change the cart icon
Closed

Comments

  • Visualpilot started the conversation
    October 31, 2025 at 7:20am

    Dear Sailent,
    I have now tried unsuccessfully to change the header icon many time.
    I would like to insert another svg than the standard you have as I dont like the design.

    Can you assist me?
    Would be nice if you made it easier to change.

  •  9,704
    Tahir replied
    October 31, 2025 at 11:24am

    Hi Visualpilot ,

    Thanks for reaching out! .

    Could you provide the icon you wish to replace it with ?.

    Best,

     

     Salient Support Team

  • Visualpilot replied
    November 1, 2025 at 7:42am

    Hi Tahir,

    I have attached the svg icon.

    thanks

    Attached files:  ICON-CART-BLACK-Crop.svg

  •  9,704
    Tahir replied
    November 1, 2025 at 8:16am

    Hi Again,

    Thanks for reaching out! .

    Change the url as needed once you have uploaded the cart icon to your website.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    body.material .icon-salient-cart:before {
    content: "" !important;
    background: url(https://bycycle.bike/wp-content/uploads/2025/10/City_M_black_simple.svg);
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: block;
}

    Thanks

     Salient Support Team

  • Visualpilot replied
    2 weeks ago on January 12, 2026 at 7:38pm

    Hi Tahir, thank you for your help.

    I have an issue when the header is transparent, I cant see the black icon.
    So basically I need something showing white icon when the header is transparent and black when scrolling and the header become solid white.

    Is that doable?

  •  9,704
    Tahir replied
    2 weeks ago on January 13, 2026 at 8:55am

    Hi Again,

    Thanks for reaching out! .

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    body.material #header-outer.transparent .icon-salient-cart:before {
    filter: invert(1);
}

    Thanks

     Salient Support Team