Adding Social Icons into Header


#1

Hey!

I’d like to be able to add in the social icons into the header. Just below the button.

I see that the header area is driven by the functions file. Is there an easy way to either implement the social icons manually, or use a widget to do so.

Any help would be great.


#2

Hi,

You can add social icons below the header button using JQuery script. Here is the steps:

  1. Install and activate the “Header and Footer Scripts” plugin
  2. Go to Settings > Header and Footer Scripts panel then add this code into the “Scripts in footer”:
<script>
jQuery(function($) {
  var icons = '';
  icons += '<a href="http://facebook.com"> <i class="fa fa-facebook"> </i> </a>';
  icons += '<a href="http://twitter.com"> <i class="fa fa-twitter"> </i>  </a>';

  $('.header-info-inner').append('<div class="header-socials"> '+icons+' </div>');
});
</script>
  1. Install and activate “Simple custom css” plugin
  2. Go to Appearance > Custom CSS then add this css code:
.header-socials {
    margin-top: 10px;
}
.header-socials a {
    padding: 10px;
    font-size: 25px;
    color: white;
    text-decoration: none;
}

You can adjust the script in above which social icons that you want to add.

Regards,
Awan