Adding Social Icons into Header


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.


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”:
jQuery(function($) {
  var icons = '';
  icons += '<a href=""> <i class="fa fa-facebook"> </i> </a>';
  icons += '<a href=""> <i class="fa fa-twitter"> </i>  </a>';

  $('.header-info-inner').append('<div class="header-socials"> '+icons+' </div>');
  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.