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;url=http%3a%2f%2fwww.paulseal.uk%2f" onclick="javascript:void window.open('https://twitter.com/share?text=Paul+Seal+.NET+Web+Developer&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.

Want to thank me?

If I've helped you out and you want to thank me, why not buy me a coffee?

Buy me a coffee

About the author

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.

Related Posts

How to animate tree icons in Umbraco v8

This post shows you how you can change the colour and animate tree icons in Umbraco based on a prope…

Read Post

How to flip an image using CSS

In this post, Mike Masey shows you how you can flip an image using CSS.

Read Post

How to create a Carousel in Umbraco using Nested Content and Bootstrap

This post will show you how to build a carousel in umbraco using Nested Content and Bootstrap

Read Post

HTML Extension method for returning formatted HTML from a string in C#

This post shows you how to create an extension method for returning formatted HTML from a string inp…

Read Post