How to add icon for My Account link?
-
18-03-2021 - |
Вопрос
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
toVendor\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..