How to add social icons that link to your social media sites

In this guide, using free social icons provided by a open source project on Github, we will should you how to use social icons to link to your personal social media sites.  If you want to be certain that your images will stay hosted, you might want to think about hosting them somewhere else like a web hosting service. 

1. Find an icon to use.

We recommend using Ionicons, a open source project that provides free MIT licensed social icons.  

In this example we are going to use the .pngs for the sake of showing how to implement external images, but the icons can also be added as pure css.



2. Upload the PNG.

When you have found the icons that you want to use in the PNG folder of Ionicons, you will need to upload them to an external site. In this guide we are using postimage. Click the browse button, locate the icon in your computer, and upload it. This and the following step (3) has to be done for each icon that you wish to use.  



3. Copy the link.

The link that we want to use for our HTML code is the "Direct Link".



4. Add the icons to your store front

We now have to decide where to put the icons.  We've decided to add them right under the store title in the head section of our storefront.

You will need to create a new <div> block within the head section under the {{#logotype}} and {{#storename}} tags. The icons have to be nested within a <div> tag that you can give any ID or class. In this case we have chosen to call it social, which means that when we style in the css later, we will refer to #social. 

Nested within the <div> we need three rows of code where we nest img tags. We do this so that each image(icon) will link to the social media pages that we want. If you are not familiar with these HTML tags since before, click here to read more about <a> tags and <img> tags.
 

<div id="social">

<a href="www.siteyouwishtolinkto.com"> <img src ="http://siteyouriconishostedon.com" alt="Name of site"></a>

</div>

5. Style the icons.

Let's create a CSS block to set the height, width and position of the icons: 

#header_container #social img {

height: ??px ;

width: ??px ;

padding-bottom: ??px ;

}

You can experiment with size and the position of the icons. In this case we have chosen to give the #logotype #storename a padding-top of 60 and the social icon div a padding-bottom of 60, to center the content within the header with enough room.



6. And we're done! 

 

Have more questions? Submit a request