Font Awesome Social Share Icon Links
12 Oct 2015
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&url=http%3a%2f%2fwww.paulseal.uk%2f" onclick="javascript:void window.open('https://twitter.com/share?text=Paul+Seal+.NET+Web+Developer&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.
Paul Seal
Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.
Proudly sponsored by
Moriyama
- Moriyama build, support and deploy Umbraco, Azure and ASP.NET websites and applications.
AppVeyor
- CI/CD service for Windows, Linux and macOS
- Build, test, deploy your apps faster, on any platform.
elmah.io
- elmah.io is the easy error logging and uptime monitoring service for .NET.
- Take back control of your errors with support for all .NET web and logging frameworks.
uSync Complete
- uSync.Complete gives you all the uSync packages, allowing you to completely control how your Umbraco settings, content and media is stored, transferred and managed across all your Umbraco Installations.
uSkinned
- More than a theme for Umbraco CMS, take full control of your content and design with a feature-rich, award-nominated & content editor focused website platform.
UmbHost
- Affordable, Geo-Redundant, Umbraco hosting which gives back to the community by sponsoring an Umbraco Open Source Developer with each hosting package sold.