Menú Social

Menú con CSS, HTML y Font-awesome.

by Yolanda Robles

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="menu-social" class="menu">
    <ul id="menu-social-items" class="menu-items">
        <li><a href="https://www.facebook.com/silocreativo"></a>
        </li>
        <li><a href="https://twitter.com/silocreativo"></a>
        </li>
        <li><a href="https://plus.google.com/111995142667713146649/posts"></a>
        </li>
        <li><a href="http://www.silocreativo.com/"></a>
        </li>
    </ul>
</div>

CSS

#menu-social {
    padding: 20px 0;
    background-color: #343a4a;
}
#menu-social ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 10px 0;
}
#menu-social ul li {
    display: inline-block;
    position: relative;
}
#menu-social li a {
    color: #F7C00A;
    margin: 0 10px;
}
#menu-social li a:hover {
    color: #c68e02;
}
#menu-social li a::before {
    content:"\f135";
    display: inline-block;
    padding: 0 5px;
    font-family: FontAwesome;
    font-size: 26px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#menu-social li a[href*="facebook.com"]::before {
    content:"\f09a";
}
#menu-social li a[href*="twitter.com"]::before {
    content:"\f099";
}
#menu-social li a[href*="plus.google.com"]::before {
    content:"\f0d5";
}
a {
    -webkit-transition: .15s all linear;
    -moz-transition: .15s all linear;
    -o-transition: .15s all linear;
    transition: .15s all linear;
}