0

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!

  • Did the answer is working? – aravind Nov 4 '19 at 8:28
1

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!

| improve this answer | |
  • Please check both ways using CSS and using Code, you can add icons. – Kishan Savaliya Nov 4 '19 at 6:23
  • @Siva, Above solution works for you ? – Kishan Savaliya Nov 5 '19 at 7:00
  • 1
    Yes. Thanks for your help @Kishan – Siva Nov 5 '19 at 10:56
  • You're most welcome Buddy. :) – Kishan Savaliya Nov 5 '19 at 10:57
1

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..

| improve this answer | |

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.