How to add icon for My Account link?

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

题

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!

有帮助吗？

解决方案

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!

其他提示

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

许可以下： CC-BY-SA 和 归因
scroll top