Own Theme - Working with own icons
Question
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.
Solution
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.