Blog

How to add social media icons to the Adirondack template header navigation?

By default the Adirondack template comes with an email icon on the top right corner. Also in the Design section you can change email to Location, Search or None.

 

But what if you want to have all your social icons in the top header? - Yes, this was my question as well. Keep reading.

 

This is what I did and down below are the instructions on how you can achieve this.

I accomplished this with jquery and font-awesome.

1. Add this code below under Settings > Advanced > Code Injection. This will add font-awesome, jquery and add the html for the Facebook icon. If you need more icons just duplicate the line starting with $('#main-navigation and use the font-awesome class names for the different icons. You can find all the icons at http://fontawesome.io/icons.


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function() { $('#main-navigation .info-title-email-wrapper #email').after('<div class="social-icons"><a href="http://facebook.com/yourpagename" target="_blank"><span class="fa fa-facebook"></span></a></div>');
});
</script>

 

Make sure to replace the Facebook or other social media URL with the one to your page.

2. And also you need to go to Settings > Design > Custom CSS and to add styling for the social icons:


.social-icons {
            line-height: 20px;

            padding-left: 10px;
            width: 20px;
            vertical-align: middle;
            display: table-cell;
}


 

This all will work with Adirondack but may need some tweaking to work with other templates.

I hope this was helpful, let me know how did you get on.