FIXED SOCIAL MEDIA ICON BAR
Run 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
   .container {
      position: fixed;
	  top: 10%;
	  left: 0;
	  text-align: center;
	  margin-top: 5px;
	  background-color: #cccccc;
	  float: left;
   }
   
   .container a {
      display: block;
	  padding: 16px;
	  font-size: 30px;
	  text-align: center;
	  
	  
   }
   .icon-bar a:hover {
	  background-color: black;;
	}

	.facebook {
	  background: #3B5998;
	  color: white;
	}

	.twitter {
	  background: #55ACEE;
	  color: white;
	}

	.google {
	  background: #dd4b39;
	  color: white;
	}

	.linkedin {
	  background: #007bb5;
	  color: white;
	}
    .content {
	   text-align: center;
	}
   
</style>
</head>
<body>
    
    <div class="container">
	  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
	  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
	  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
	</div>
	<div class="content">
		<h2> Sticky social media icon bar </h2>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
		<h3> Scroll below </h3>
	</div>
</body>
</html>