Dashicons social square

by Roberto Apasajja

HTML

<link rel="stylesheet" href="https://developer.wordpress.org/wp-includes/css/dashicons.min.css">
<div id="sharesocial">
  <span><span class="desc">Share on Facebook</span><a href="#"><span class="dashicons dashicons-facebook-alt"></span></a></span><br>
  <span><span class="desc">Share on Twitter</span><span class="dashicons dashicons-twitter"></span></span><br>
  <span><span class="desc">Share on Google+</span><span class="dashicons dashicons-googleplus"></span></span><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 i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i ii i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i 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

.dashicons {
  color: #fff;
  padding:7px;
  vertical-align:middle;
}

.dashicons-facebook-alt {
  background: #3b5998;
}

.dashicons-twitter {
  background: #55acee;
}

.dashicons-googleplus {
  background: #dd4b39;
}

/********************************* specific *********************************/

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

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

#sharesocial .desc {
  padding: 4px 9px;
  margin-right:3px;
  border-radius:5em;
  background:#ddd;
  color:#666;
  display:none;
}

#sharesocial>span:hover .desc {
  display:inline;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}