<!-- 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 ;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.