Okay
  Public Ticket #453961
Change basket icon
Closed

Comments

  • Kasper started the conversation
    June 10, 2015 at 12:13am

    Hi guys

    How can I change the basket icon to a .png file that I have?

    - Kasper

  •  8,393
    Tahir replied
    June 10, 2015 at 3:00pm

    Hey ,

    Simply change the url in css. Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    .woocommerce .classic .product-wrap .add_to_cart_button {
    background-image: url(../img/icons/cart-add.png)!important;
}

    Thanks


    ThemeNectar Support Team 

  • Kasper replied
    June 11, 2015 at 12:48pm

    Hi Tahir

    I\'m sorry, but It does not work for me ;-(

    - Kasper

  • Kasper replied
    June 13, 2015 at 12:56am

    Just to be clear: I mean the basket ind the header ;-)

  •  8,393
    Tahir replied
    June 13, 2015 at 2:48pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .ascend .icon-salient-cart:before {
    font-family: \"FontAwesome\";
    content: \"\\f07a\" !important;
}

    Thanks


    ThemeNectar Support Team 

  • Kasper replied
    June 14, 2015 at 7:07pm

    Hi Tahir

    That changes the basket to another default icon, but how can I change it to my own icon? .png?

    - Kasper

  •  8,393
    Tahir replied
    June 15, 2015 at 3:33pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .ascend #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart {
    background-image: url(http://hvadmeddenher.dk/kongessloejd/wp-content/uploads/2015/06/kurv.png)!important;
    background-repeat: no-repeat;
    width: 41px !important;
    left: -9px !important;
}


.ascend #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart:before {
    visibility: hidden !important;
}

    Thanks


    ThemeNectar Support Team 

  • Kasper replied
    June 16, 2015 at 11:57am

    Your the best - thank you! ;-)

  • Vitaminpatchclub replied
    July 26, 2017 at 4:11am

    Hello, I'm using Salient Theme 8. and wanted to change out the woocommerce icon in the header. I tried all the code options here and nothing worked. 

    When I use the code:

    .ascend #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart {    background-image: url(http://hvadmeddenher.dk/kongessloejd/wp-content/uploads/2015/06/kurv.png)!important;    background-repeat: no-repeat;    width: 41px !important;    left: -9px !important;
}
.ascend #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart:before {    visibility: hidden !important;
}

    The icon disappears. I tried to resize the my icon to different sizes but that hasn't worked as well. 


    How would I change the icon to my own .png icon? Thank you for your time.

  •  8,393
    Tahir replied
    July 26, 2017 at 10:38am

    @vitamin

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  • Vitaminpatchclub replied
    July 26, 2017 at 2:58pm

    Tahir,

    Thank you for the reply. Below is the site URL. The cart icon is missing. I have the code I posted below in with the URL to my cart icon. 

    http://site1.dexdigitalmedia.com

    Thanks for your help.

  •  8,393
    Tahir replied
    July 26, 2017 at 3:01pm

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    .ascend #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart {
 
    background-size: 30px;
    height: 50px;
    top: -5px;
}

    Thanks

    ThemeNectar Support Team 

  • Vitaminpatchclub replied
    July 26, 2017 at 3:39pm

    Tahir,

    Thank you. Below is the code I have and the icon is there but a bit cut off on the right side. I adjusted the margin and it moves over but the icon is still cut off. Any idea how to adjust icon over to the left a bit.

    .ascend #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart {

        background-size: 30px;
        background-repeat: no-repeat; 
        height: 50px;
        top: -5px;
    }

    .ascend #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart:before {
        visibility: hidden !important;
    }

    Thanks again for everything.


  •  8,393
    Tahir replied
    July 27, 2017 at 10:56am

    This is the final code . 

    .ascend #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart {
    background-image: url(http://site1.dexdigitalmedia.com/wp-content/uploads/2017/07/cart-icon.png)!important;
    background-size: 30px;
    background-repeat: no-repeat;
    height: 50px;
    top: -5px;
    width: 40px;
    left: -5px;
}

    Next time please purchase the Support Package /Verify your purchase .

    Be.st 

    ThemeNectar Support Team 

  • Vitaminpatchclub replied
    July 27, 2017 at 7:53pm

    Thank You Tahir!

    Totally understand.