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.

0

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.

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.