Magento – how to add icon instead of text in magento top links My Account My Wishlist My Cart Checkout Log In

As mentioned before you can edit your local.xml file. It should be in your theme folder e.g.: app/design/frontend/yourpackage/yourversion/layout/local.xml If it´s not there you can create it. It`s a very good way to edit the layout xml for a theme.

Remove "My Account" for the default handle

<default>
    <reference name="top.links">
        <action method="removeLinkByUrl">
            <url helper="customer/getAccountUrl"/>
        </action>
    </reference>
 </default>

Add "Register" for the logged out handle

<customer_logged_out>
    <reference name="top.links">
        <action method="addLink" translate="label title">
            <label>Register</label>
            <url helper="customer/getLogInUrl"/>
            <prepare/>
            <urlParams/>
        </action>
    </reference>
</customer_logged_out>

Add "My Account" for the logged in handle

<customer_logged_in>
    <reference name="top.links">
        <action method="addLink" translate="label title">
            <label>Your Account</label>
            <url helper="customer/getAccountUrl" />
            <prepare/>
            <urlParams/>
            <liParams>
                <id>header-account-link</id>
            </liParams>
            <aParams/>
            <beforeText/>
            <afterText/>                 
        </action>
    </reference>
</customer_logged_in>

In app/design/frontend/base/default/layout/customer.xml you can find the possible handles and url helper etc.

I explain this question by using CSS as technique to answer.

The addLink action inside the layout XML is a little bit tricky and before changing the corresponding list entry you need to remove it and add it again to change it as you want.

Remove the link entry (I take 'My Account' as example). In your template's local.xml add:

<default>
    <reference name="root">
    ...
        <reference name="top.links">
            <action method="removeLinkByUrl"><url helper="customer/getAccountUrl"/></action>

Notice we are using the method removeLinkByUrl which is Magento core.

After that you can add 'My Account' by the following layout XML:

             <action method="addLink" translate="label title" module="customer">
                <label>My Account</label>
                <url helper="customer/getAccountUrl"/>
                <title>My Account</title>
                <prepare/>
                <urlParams/>
                <position>1</position>
                <liParams/>
                <aParams>class="top-link-account"</aParams>
            </action>
        ...
        </reference>
    ...
    </reference>
...
</default>

Note you are able to set a CSS class for your newly added 'My Account' link. Now you are set to do your CSS magic for your responive design.

@media only screen and (max-width: 767px) {
    .links li a.top-link-account {
        font-size: 0 !important;
        ...
    }
    .links li a.top-link-account:before {
        content: "\f084";     # fontawesome unicode (fa needs to be present)
        ...
    }
...
}

Be aware that Magento uses different states for the current user session. So the login link entry is not handled inside the default XML node but inside <customer_logged_in> and <customer_logged_out>.

The wishlist link entry is handled inside wishlist.xml. Look at the node <customer_account>. I'm sure you can change it by yourself by now (but use your local.xml)...

Edit: Well, this won't help you, as it only addresses the link list inside the customer account page. The wishlist link is added by:

...
<reference name="top.links">
    ...
    <action method="addLinkBlock"><blockName>wishlist_link</blockName></action>
...

inside wishlist.xml. Fortunately addLinkBlock supports <aParams>. So remove the added blocklink and add again, with a needed CSS class like:

...
    <action method="removeLinkBlock"><blockName>wishlist_link</blockName></action>
...

and add it again with:

...
    <action method="addLinkBlock"><blockName>wishlist_link</blockName><aParams>class="top-link-wishlist"</aParams></action>
...

Now we come to the 'My Cart' link. Look into checkout.xml and find that the cart link is added with:

<default>
    <!-- Mage_Checkout -->
    <reference name="top.links">
        <block type="checkout/links" name="checkout_cart_link">
            <action method="addCartLink"></action>
            <action method="addCheckoutLink"></action>
        </block>
    </reference>

That's a tough one? Well, luckily it already has the CSS class top-link-cart, so do some CSS magic I mentioned above. The next level would be to add the number of items inside your cart to your icon. Please add another question for that, because this would be another story (also applies to the wishlist link). The most templates I know don't use the 'My Cart' link to avoid this at all.

I hope that helped and gave you some more insides on Magento's layout XMLs.