1

I know there are some topics on this subject, but my question is the following, not only do I need to know how to replace the cart icon, but I need to use a png image I have. Where do I save this image in my theme so that I can only reference it in the same way that luma makes reference to its icons?

I wanted to do it by css, I saw that I can change it as follows:

.minicart-wrapper .action.showcart:before {
content: ''; }

Luma:

font-family: 'luma-icons';

But how do I call my image that I need to save my theme? and again, where?

Improve this question

3 Answers 3

Reset to default
1

You can place your cart image in /pub/media/

On your theme:

web/css/source/_extend.less

.minicart-wrapper .action.showcart::before {
  -webkit-font-smoothing: antialiased;
  font-size: 22px;
  line-height: 28px;
  color: #8f8f8f;    
  margin: 0;
  vertical-align: top;
  display: inline-block;
  font-weight: normal;
  overflow: hidden;
  speak: none;
  text-align: center;
  content: url('https://www.yourdomin.com/yourstore/pub/media/Cart.png');
}

.minicart-wrapper .action.showcart::active {
  -webkit-font-smoothing: antialiased;
  font-size: 22px;
  line-height: 28px;
  color: #8f8f8f;    
  margin: 0;
  vertical-align: top;
  display: inline-block;
  font-weight: normal;
  overflow: hidden;
  speak: none;
  text-align: center;
  content: url('https://www.yourdomin.com/yourstore/pub/media/Cart.png');
}

.minicart-wrapper .action.showcart.active:before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 22px;
  line-height: 28px;
  color: #757575;
  content: url('https://www.yourdomin.com/yourstore/pub/media/Cart.png');
  font-family: 'luma-icons';
  margin: 0;
  vertical-align: top;
  display: inline-block;
  font-weight: normal;
  overflow: hidden;
  speak: none;
  text-align: center;
}
Improve this answer
1

You can put your image in below path.

app/design/frontend/<vendor>/<package>/web/images/cart_image.png

Now you need to add <span class="cartimg"> tag just before the <a> tag of cart icon and apply your png image to span tag.

if your css in the below folder

app/design/frontend/<vendor>/<package>/web/css/style.css

Then you can write

.cartimg { background: url('../images/cart_image.png') }

for the updated answer please check below image. enter image description here

Improve this answer
2
  • Thanks for the answer, I didn't find where the phtml with the tag <a> of the cart is, did you know the directory?
    – Hudson Alves Triunfante
    Commented Jul 29, 2020 at 13:06
  • Hi Hudson, Please check my updated answer. The <a> was also in my custom theme where you have to override this html and add <span> tag just above <a> tag as mention in screenshot
    – Amitkumar solanki
    Commented Jul 29, 2020 at 13:42
0

You can put your cart png image on below path

app/design/frontend/{{VENDOR}}/{{PACKAGE}}/web/images

Add css in your style

.minicart-wrapper .action.showcart {
    font-size: 0;
}

.minicart-wrapper .action.showcart:before {
    content: "";
    background: url(../images/cart-ico.png) no-repeat;
    width: 24px;
    height: 27px;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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