Font Awesome social square

by Roberto Apasajja

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="sharesocial">
<a href="#" onClick="window.open('http://www.facebook.com/sharer.php?u=urlnya','z','resizable,height=260,width=370'); return false;"><span class="fa fa-facebook"></span></a><br>
<a href="#" onClick="window.open('https://twitter.com/share?url=urlnya&text=Home+&hashtags=','z','resizable,height=260,width=370'); return false;"><span class="fa fa-twitter"></span></a><br>
<a href="#" onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=urlnya','z','resizable,height=260,width=370'); return false;"><span class="fa fa-linkedin"></span></a><br>
<a href="#" onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=urlnya','z','resizable,height=260,width=370'); return false;"><span class="fa fa-google-plus"></span></a><br>
</div>

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i...

CSS

/********************************* general *********************************/

html * {transition: 1s}

/********************************* social share general *********************************/

span.fa {
  color:#fff;
  width:2em;
  height:2em;
  line-height: 2em;
  font-size:22px;
  text-align:center;
}
span.fa:hover {
  background:#000;
  color:#777
}

.fa-facebook {
  background: #3b5998;
}
.fa-twitter {
  background: #55acee;
}
.fa-linkedin {
  background: #007bb5
}
.fa-google-plus {
  background: #dd4b39
}

/********************************* social share specific *********************************/

#sharesocial {
  position:fixed;
  text-align:right;
  right:0;
  top:20%;
}