Change Header TEXT Links for IMAGE LINKS (for 'My Account', 'My Wishlist', 'My Cart', 'Log In', Log Out')

Question

I am using Magento 1.8.1, and I couldn't find any solution to replace the text links 'My Account', 'My Wishlist', 'My Cart', 'Log In', Log Out' for icons/image links for my Mobile responsive version.

When I inspect my page hint path I have these files that appears: - header.phtml file [/app/design/frontend/default/[Theme]/template/page/html] in which I have the following code that I cannot replace text link by images since my Text links are not directly explicitly mentioned here (so I cannot call a class in my css):

    <?php echo $this->getChildHtml('store_switcher') ?>
        <div class="form-language">
        <?php echo $this->getChildHtml('store_language')?>  
        </div>  
        <div class="currency">
        <?php echo $this->getChildHtml('custom_currency_selector') ?>
        </div>  
        <div class="minicart">
        <?php echo $this->getChildHtml('top_cart') ?>
        </div>

        <div class="clear"></div>   
        <?php echo $this->getChildHtml('topLinks') ?>                   

• From links.phtml [/app/design/frontend/default/[Theme]/template/page/template] I have the following code that also appear when I do a code inspection:

  <?php $_links = $this->getLinks(); ?>
  <?php if(count($_links)>0): ?>
  <ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
  <?php foreach($_links as $_link): ?>
      <?php if ($_link instanceof Mage_Core_Block_Abstract):?>
          <?php echo $_link->toHtml() ?>
      <?php else: ?>
          <li
          <?php if($_link->getIsFirst()||$_link->getIsLast()): ?> 
              class="<?php if($_link->getIsFirst()): ?>first<?php endif; ?><?php if($_link->getIsLast()): ?>last<?php endif; ?>"
          <?php endif; ?>
          <?php echo $_link->getLiParams() ?>>
          <?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?>
              </li>
      <?php endif;?>
  <?php endforeach; ?>
  </ul>
  

Which is impossible to retrieve the relevant class to call it on my css file in order for me to put an image. Note I believe text links are called with the following code:

.links { text-align: right; }
.links li { display:inline; padding: 1px 10px 1px 5px; background: url(../images/toplinksap.png) no-repeat center right; }
.links li.first { padding-left:0 !important; }
.links li.last { background:none !important; padding-right:0 !important; }

In which xml file such as customer.xml [app/design/frontend/default/blanco/layout] gives the position of the links for example for 'My Account' I have the following code:

<default>
    <!-- Mage_Customer -->
    <reference name="top.links">
        <action method="addLink" translate="label title" module="customer"><label>**My Account**</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>
    </reference>
</default>

So my questions are how can I replace the label "My Account" by an image? (code if not relevant which file should I modify with which code + images path for uploading purpose are appreciated).

Answer 1

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.