1

I want to add Icons for Cart, Wishlist and Account Links in the header.

I placed them /app/design/frontend/vendor/theme/web/images/icons.

I know I can set the icons like (example cart):

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

}

But: Whats the URL to the Icons?

First I tried it like

http://your-domain.com/app/design/frontend/vendor/theme/web/images/icons/cart.png. That not worked, but that's okay.

So I checked out how the URL to the logo is and them I could find a working URL:

http://your-domain.com/static/version1533293004/frontend/vendor/theme/store/images/icons/Cart.png.

But there is 'version1533293004', that's probably a problem?

So, how do I get working URLs for my Icons?

Edit: Or can I override the default templates for this in my Theme? I kind of have my troubles with the Magento2 docs, hard to find such specific things.

2 Answers 2

1

Ok, not much help here.

So I figured out, that I have to change the template files.

Whishlist: Copy /app/vendor/magento/magento-wishlist/view/frontend/templates/link.phtml to your theme like /app/design/frontend/<vendor>/<themename>/Magento_Wishlist/templates/link.phtml

Now I changed it like:

<li class="link wishlist" data-bind="scope: 'wishlist'">
    <a <?= /* @noEscape */ $block->getLinkAttributes() ?>> <img src="<?= $this->getViewFileUrl('images/icons/Wishlist.png'); ?>"
                                                                alt="<?= $block->escapeHtml($block->getLabel()); ?>"
                                                                title="<?= $block->escapeHtml($block->getLabel()); ?>">
        <!-- ko if: wishlist().counter -->
        <span data-bind="text: wishlist().counter" class="counter qty"></span>
        <!-- /ko -->
    </a>
</li>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wishlist": {
                        "component": "Magento_Wishlist/js/view/wishlist"
                    }
                }
            }
        }
    }

</script>

My Icon were located at /app/design/frontend/<vendor>/<themename>/web/images/icons/Wishlist.png

For the cart i copied /app/vendor/magento/magento-checkout/view/frontend/templates/cart/minicart.phtml.

Also I had to add some CSS for the cart:

.minicart-wrapper {
          margin-left: unset;

          .action.showcart {
            &::before, &.active::before {
              content:    normal;
            }
            .text {
              position:   unset;
              width:      auto;
              height:     auto;
            }
            .counter.qty {
              position:       relative;
              right:          8px;
              margin-bottom:  8px;
            }
          }
        }

Be careful, you may to change the things different than I did.

I was still not able to change the "My Account" Link. I asked a Question here: How can I change my account link?

But this will probably not get answered, just like this one.

0

I highly advise not to use .png Icons in your Magento 2 project.

I suggest you to work with Icon Fonts instead.

If you want to learn more how to Create, Implement and Update your own Icons in your Magento 2 project, you can check this explainer video that I have created: https://youtu.be/uT3eL_N1a1g

Your Answer

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

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