3

I was wondering if there was a simple way to change the default cart icon? I have been looking through the documentation and haven't been able to find a clear answer.

4

Magento 2 use font icon. .minicart-wrapper .action.showcart:before selector responsible for cart icon. See minicart.less for details

1

As per KAndy's answer you can use .minicart-wrapper .action.showcart:before selector to change the icon, for example I wanted to change it with Google Material's Shopping Basket icon so I added following in my _theme.less file

  .minicart-wrapper {
margin-right: 10px;

.action.showcart::before, .action.showcart.active::before {
  display: inline-block;
 white-space: nowrap;
word-wrap: normal;
direction: ltr;
content: '\e8cb';
color: @color-white;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
vertical-align:middle;
}
  • other than including the above code in less file, is there anything else needs to be included, because i'm getting plain sqaure when I use your code – Nausif Sep 12 '17 at 14:25
  • You'll need to add external css library first of course. e.g. in default_head_blocks.xml add <head> <css src="myexternalcssfile.css" src_type="url"/> </head> – Devtype Sep 12 '17 at 14:49
1

I'm adding this answer if someone have own icon image and plan to use it. This method will be helpful. Helped me in theme based on blank theme.

.minicart-wrapper .action.showcart:before {
         content: url(http://your-domain.com/.../cart-image.png);

}

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.