Adding social media link/icon to Header/Contact Area


#1

Hello! In the header area, where we have our email, telephone, location, is it possible to add a social media icon and link there too? I don’t see a customization option in that section was wanted to see if there is a CSS code to add? Thanks!


#2

Hello there,

Unfortunately it isn’t supported yet. However you can still achieve it with jQuery code; try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
;(function($) {

   'use strict'

   if( $('.header-contact').length ) {

     var socialFacebook = '<a href="http://facebook.com/profile"><i class="fa fa-facebook"></i></a>';
     var socialTwitter = '<a href="http://twitter.com/profile"><i class="fa fa-twitter"></i></a>';
     var socialInstagram = '<a href="http://facebook.com/profile"><i class="fa fa-facebook"></i></a>';

     $('.header-contact .container').append(socialFacebook+socialTwitter+socialInstagram);

   }

})(jQuery);
  1. Update

Regards,
Kharis


Re-order Tel, E-mail, City in Header Area?
#3

Thank you Kharis! Works well (for some reason I have to keep the Twitter code line, even though I’m only showing Instagram). I actually tried deleting both the FB and Twitter code lines, so I could just keep the IG one, but then all of them didn’t appear. Regardless, it’s working just fine if I keep the 2nd (Twitter) code line, along with the 3rd line (IG - I had to edit this as you had FB info in there). Thank you!