Add social icons in header near to search

Hi there,

The easiest way to do that is by following this guide: https://docs.woocommerce.com/document/create-a-social-icon-menu/

How to add whatsapp and wechat icons with links

I added the following in css

.secondary-navigation a[href*=”wa.me/009112345678″]:after {
content: “\f232”;
color: #cb2027; }

and whatsapp menu added. But its not showing whatsapp icon

Hi @sibichan,

If your custom link in the menu looks like this.

Link to image: https://cld.wthms.co/55QRvu

Then make sure the following CSS is added in some fashion to your site.

.secondary-navigation a[href*="https://wa.me"] {
    text-indent: -9999px;
}

.secondary-navigation a[href*="https://wa.me"]:after {
    text-indent: 0;
    display: block;
    float: left; 
}

a[href*="https://wa.me"]:after {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}

.secondary-navigation a[href*="wa.me/"]:after {
    content: "\f232";
    color: #cb2027; 
}

Among my other social icons, it looks like this.

Link to image: https://cld.wthms.co/Hx3u9x

You can follow the same process for WeChat, but of course change the base URL and content used for the WeChat icon.

• This reply was modified 5 years, 5 months ago by Ryan Ray, a11n.
• This reply was modified 5 years, 5 months ago by Ryan Ray, a11n.