How to Use

These are examples of icons that can be used to display a set of images with links to your social media sites. There are many other options for free icon sets that you can find online if you prefer, many of which include other social media sites than those you see here.

In order to use these sets, do the following:

  1. Create a “Text” widget on your site in the Customize > Widgets area
  2. Copy the code in the box for the icon style you would like to use — be sure to copy everything in the code box
  3. Paste the code into the Content potion of your “Text” widget, then Save the widget
  4. Next, modify the [your link here] portion of the code for each social media site you wish to include; delete those you do not wish to show; you should include the link to your specific Twitter page, Facebook page, or other account, not links to the main sites

 

If you would prefer to use other icons than you see here, you can still use this code to get started.

  1. Search for the icons set you’d like to use, be sure to find a set that includes all the sites you want with the same style (rather than finding lots of different size/style icons)
  2. Download the icon set to your computer
  3. Upload all of the images you wish to use to your Media Library
  4. Copy the code from one of the examples given here, paste it into a “Text” widget in the Customize > Widgets area of your site
  5. Modify the `src=”http…”` portion of the code to instead be the links to the icons you have uploaded to your media library
  6. Add the links to your social media accounts

Square

TwitterLinkedInFacebookPinterest
Source Code:
<div>
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter1.png" width="35" height="35" />
</a>
<a href="[full link to your LinkedIn]">
<img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin1.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png" width="35" height="35" />
</a>
<a href="pinterestaddress">
<img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest1.png" width="35" height="35" />
</a>
</div>

Round

TwitterPinterestFacebookLinkedInRSS

Source Code:

<div>
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter.png" width="35" height="35" />
</a>
<a href="[full link to your Pinterest]">
<img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" />
</a>
<a href="[full link to your LinkedIn]">
<img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin.png" width="35" height="35" />
</a>
<a href="[full link to your Instagram]">
<img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" />
</a>
</div>

Leaf

TwitterLinkedInFacebookRSS
Source Code:
<div>
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/twitter1.png" width="35" height="35" />
</a>
<a href="[full link to your LinkedIn]">
<img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/linkedin1.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/facebook1.png" width="35" height="35" />
</a>
<a href="[full link to your RSS feed]">
<img title="RSS" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/rss1.png" width="35" height="35" />
</a>
</div>

Flat

TwitterPinterestFacebookEmailRSS
Source Code:
<div>
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/twitter.png" width="35" height="35" />
</a>
<a href="[full link to your Pinterest]">
<img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/pinterest.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/facebook.png" width="35" height="35" />
</a>
<a href="mailto:[email address]">
<img title="Email" alt="Email" src="https://socialmediawidgets.files.wordpress.com/2014/03/email.png" width="35" height="35" />
</a>
<a href="[full link to your RSS feed]">
<img title="RSS" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/rss.png" width="35" height="35" />
</a>
</div>