Replace My Wishlist Text with Icon

Question

I want to know how to replace the "My Wish List" text in toplinks with an icon. I don't want an Icon with pseudo code like "::before". Adding a <i> </i>- tag in the code should be the solution.

The text of My Wish List we can edit in "getLabel()" function of "Link.php" in module-wishlist. But I don't want any text. Only the Icon should be in storefront visible. If I set the return value to an empty string in getLabel() function then in mobile view it is not visible.

Where I can do that? I think we need to create an own module and overwrite the files. But which file and what exactly?

Answer 1

You can remove label and add icon from the template file. For that you have to override vendor/magento/module-wishlist/view/frontend/templates/link.phtml file in your theme and replace label code with icon code.

Override file path should be like this:

app/design/frontend/VendorName/ThemeName/Magento_Wishlist/templates/link.phtml

Code of label looks like:

<?= $block->escapeHtml($block->getLabel()) ?>

You can replace it with:

<i class="fa fa-heart"></i>