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