3

I wanted to change the shopping cart icon in magento 2 and make to change color on mouse hover. I found the block name I dont find how to change the image icon in the block.

thanks in advance

Improve this question
2
  • you want to change minicart icon on the top ? – Manoj Deswal Jul 6 '17 at 4:12
  • yes! exactly I wanted to replace it with an image that I want and change image on mouse hover – learner Jul 6 '17 at 4:16
5

In your extended file either _minicart.less or _extend.less

app/design/frontend/vendorname/themename/Magento_Checkout/web/css/source/module/_minicart.less
app/design/frontend/vendorname/themename/Magento_Theme/web/css/source/_extend.less

add below css class and alter you style as per requirements here default css is written and cart icon is coming via Luma Icons with content value "\e611"

you can change them to font-awesome icons or your custom image using background image

.minicart-wrapper .action.showcart::before,
.minicart-wrapper .action.showcart.active::before {
    -webkit-font-smoothing: antialiased;
    font-size: 22px;
    line-height: 28px;
    color: #8f8f8f;
    content: '\e611';
    font-family: 'luma-icons';
    margin: 0;
    vertical-align: top;
    display: inline-block;
    font-weight: normal;
    overflow: hidden;
    speak: none;
    text-align: center;
}
.minicart-wrapper .action.showcart:hover::before{
    color:#333;
}

I hope this will work for you. If you are using font awsome icons on your site then that will better option and color changing will be flawless

Thanks

Improve this answer
3
  • this shows after I click the icon.. i wnated show it default – learner Jul 6 '17 at 5:11
  • 1
    could you pass the url of site – Manoj Deswal Jul 6 '17 at 5:12
  • @learner my edit will solve your problem. – BugHunterUK Nov 20 '20 at 2:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.