How to add icon for My Account link?

magento.stackexchange https://magento.stackexchange.com/questions/319339

Question

I want to display the icon for the header link My Account instead of the text link. How can I do that?

Is that we can do via CSS? or Is there any method I should follow?

Any help will be appreciated!

Was it helpful?

Solution

You can do that using CSS and also using code.

1. Using CSS

Here you need to create customer_account.xml file here in your custom theme or you can add that in your custom module. We will create this file in our custom theme here in this path.

app/design/frontend/Vendor/Theme/Magento_Theme/layout/customer_account.xml

Content for this file is...

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_account_navigation">
            <block class="Vendor\Module\Block\Account\WishlistIcon" ifconfig="wishlist/general/active" name="customer-account-navigation-wish-list-link">
                <arguments>
                    <argument name="path" xsi:type="string">wishlist</argument>
                    <argument name="label" xsi:type="string" translate="true">My Wish List</argument>
                    <argument name="sortOrder" xsi:type="number">210</argument>
                    <argument name="attributes" xsi:type="array">
                        <item name="class" xsi:type="string">my-wishlist-link-icon</item>
                    </argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Here I've added my-wishlist-link-icon this class for wishlist link. So now can can add icon using CSS by adding these lines in CSS.

.my-wishlist-link-icon { content: url(/pub/media/wishlist-icon.png); }

2. Using Code

Create custom link Block. For e.g. if you want to add icon instead of text for 'My Wishlist' then you can do this thing.

Create customer_account.xml file here in your custom theme

app/design/frontend/Vendor/Theme/Magento_Theme/layout/customer_account.xml

Or you can create this file in your custom module as well.

Content for this file is...

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_account_navigation">
            <block class="Vendor\Module\Block\Account\WishlistIcon" ifconfig="wishlist/general/active" name="customer-account-navigation-wish-list-link">
                <arguments>
                    <argument name="path" xsi:type="string">wishlist</argument>
                    <argument name="label" xsi:type="string" translate="true">My Wish List</argument>
                    <argument name="sortOrder" xsi:type="number">210</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>
  • Here I've changed Block's class name from Magento\Customer\Block\Account\SortLinkInterface to Vendor\Module\Block\Account\WishlistIcon.

So now we need to create one Block file in our custom module here

app/code/Vendor/Module/Block/Account/WishlistIcon.php

Content for this file is ..

<?php
namespace Vendor\Module\Block\Account;

class WishlistIcon extends \Magento\Framework\View\Element\Html\Link\Current
{
    protected function _toHtml()
    {
        return return '<img src="your_base_url/pub/media/wishlist-icon.png"/>';
    }
}

Hope this will help you!

OTHER TIPS

You can add class to My account Link and add your style for it.

For this you need to override only the xml.

vendor/magento/module-customer/view/frontend/layout/default.xml

to

app/design/Vendor/Module/Magento_Customer/layout/default.xml

 <referenceBlock name="top.links">
    <block class="Magento\Customer\Block\Account\Link" name="my-account-link">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">My Account</argument>
            <argument name="sortOrder" xsi:type="number">110</argument>
            <argument name="class" xsi:type="string">Yourclass</argument>
         </arguments>
     </block>
</referenceBlock>

You can change the title or You can write style to add icon using that class..

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top