Font Awesome Social Share Icon Links

You may have noticed the links on my site after each article which let you share the article on social sites like Facebook and Twitter etc.

This post gives you the code I used for the social share icons on my site.

Font Awesome gives you access to hundreds of icons, and allows you to stack them on top of eachother to create different icons.

In this code example you will see I stacked the white version of the social icon on top of a coloured circle.

<!DOCTYPE html>

<html>
<head>
  <title>Font Awesome Social Share Icons Example</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <style>
         body{
            color: #000;
         }
 
         #share-twitter { color: #6CADDE; }
         #share-facebook { color: #3B5998; }
         #share-linkedin { color: #0077B5; }
         #share-google { color: #D50F25; }

     </style>
</head>

<body>
   <div class="container">
       <div class="row social-share">
          <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
              <h4 class="text-center">Share with others</h4>
          </div>
       </div>
       <div class="row social-share">
          <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
             <ul class="list-inline text-center">
                <li>
                    <a id="share-twitter" target="_blank" href="https://twitter.com/share?text=Paul+Seal+.NET+Web+Developer&amp;amp;url=http%3a%2f%2fwww.paulseal.uk%2f" onclick="javascript:void window.open('https://twitter.com/share?text=Paul+Seal+.NET+Web+Developer&amp;amp;url=http%3a%2f%2fwww.paulseal.uk%2f','Twitter Paul Seal Share','width=520,height=570,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" title="Share on Twitter">
                       <span class="fa-stack fa-lg">
                          <i class="fa fa-circle fa-stack-2x"></i>
                          <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                       </span>
                    </a>
                </li>
             </ul>
          </div>
       </div>
   </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

I've referenced bootsrap for the layout of the document and font awesome for the icons.

Please Note: If you create the html file using the sample HTML above, you will need to run it as a site with something like IIS.

If you can't get the page to run, you can view this example here.