<!-- Explicación completa en:
http://galatar.com/como-crear-una-lista-horizontal-con-html-y-css/
-->
<ul class="social-icons" id="l1">
  <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
</ul>

<ul class="social-icons" id="l2">
  <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
</ul>
<div class="tooltip">display: inline;</div>

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

a {
  color:#009688;
}

#l1, #l2{
  float:left
}

.social-icons li {
  font-size: 1.2em;
  padding: 0.5em;
}

#l1 li{
  display:list-item;
  xlist-style:none;
}

#l2 li{
  display: inline;
}

#l2{
  margin-left:50px;
  margin-top:100px;
}

div.tooltip{
  background: #009688;
  padding: .5em;
  border-radio: 4;
  color: white;
  font: courier;
  float:left;
  position: absolute;
  top: 150px;
  left: 220px;
  
}
div.tooltip:before {
  position:absolute;
  bottom:34px;
  content:"";
  border-bottom: 10px solid #009688;
  border-top: 10px solid transparent ;
  border-right: 10px solid transparent ;
  border-left: 10px solid transparent ;
}