0

May i know how to add icons in header ? enter image description here

Improve this question
7
  • It completely depends upon your theme and without knowing the code which is working inside that, it will be very hard for someone here to answer this.
    – Prateek
    Commented Dec 9, 2015 at 7:07
  • Thank You For Reply ..just tel me how to add that ? what is the code ? normally
    – Mounika Reddy
    Commented Dec 9, 2015 at 7:08
  • You can try to achieve something via CSS. There are many resources out there for this. This is not Magento specific unless you want it to be configurable via admin.
    – Prateek
    Commented Dec 9, 2015 at 7:10
  • ok...may i know one thing ? is there seprate code for home page and otherpages ?i add what i want in header but its not showing in home page ?
    – Mounika Reddy
    Commented Dec 9, 2015 at 7:14
  • Generally, it's header which is present throughout the whole site. But, as you are using some custom theme, it might be possible that you are having different headers for different pages. If that's the case, then you have a complex theme at your hand and the developers of that theme would be having some pointers about how you can achieve this.
    – Prateek
    Commented Dec 9, 2015 at 7:17

2 Answers 2

Reset to default
0

Add your icons in file app\design\frontend\your_package\your_theme\template\page\html\header.phtml

Like this way before function <?php echo $this->getChildHtml('topSearch') ?>

<a href="<?php echo $this->getUrl('') ?>" title="" ><img src="<?php echo $this->getSkinUrl('images/fam_book_open.png"') ?>" alt="" /></a>
Improve this answer
0
0

To add a Toplink in your website header, create a custom module and then follow this:

Method#1 Basic link using layout XML

// app/code/Namespace/Modulename/view/frontend/layout/default.xml
<?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="top.links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="whatsapp-link" before="my-account-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">Contact us on Whatsapp</argument>
                    <argument name="path" xsi:type="string">some-path-url-string</argument>
                    <argument name="class" xsi:type="string" translate="false">contact-whatsapp</argument>
                    <argument name="sortOrder" xsi:type="number">100</argument>
                    <argument name="target" xsi:type="string">_blank</argument>
                </arguments>
            </block>       
        </referenceBlock>
    </body>
</page>

By just using this file, you will be able to create a custom top link, and with the added class you can style it in you css/less files.

Method#2 Using Template phtml file Sometimes there are requirements when you need more control over newly added toplinks, or add image or write your own html. For adding a custom toplink using a template, follow this way.

// app/code/Namespace/Modulename/view/frontend/layout/default.xml
<?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="top.links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="whatsapp-link" template="Namespace_Modulename::whatsappLink.phtml">
            </block>       
        </referenceBlock>
    </body>
</page>

And then add the template phtml file defined in xml above in your code as follow.

// app/code/Namespace/Modulename/view/frontend/templates/whatsappLink.phtml
<li class="link whatsapp-link">
    <a href="some-path-url-string" title="Connect via Whatsapp" target="_blank">
        <img class="whatsapp-img" src='<?php echo $this->getViewFileUrl('Namespace_Modulename::images/WhatsApp_logo.png'); ?>' alt="Whatsapp Image">
        <span class="whatsapp-label">Connect via Whatsapp</span>
    </a>
</li>

Using this way, I added my icon with toplink and I can play with it as per requirement.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.