icons.html

<style>
    #media_container{
        width: 974px;
        height: 30px;
        margin: 0 auto;
    }
    #social_icons{
        position: fixed;
    }
    #social_icons ul{
        list-style: none;
        margin: 0;
    }
    #social_icons ul li{
        float: left;
        text-indent: -999px;
    }
    #social_icons ul li a{
        height: 32px;
        width: 32px;
        display: block;
        color: #898989;
    }
    #social_icons ul li.fb a{
        background: url('/res/facebook.png') 0 50% no-repeat;
    }
    #social_icons ul li.twitter a{
        background: url('/res/twitter.png') 50% 50% no-repeat;
    }
    #social_icons ul li.linkedin a{
        background: url('/res/linkedin.png') 50% 50% no-repeat;
    }
    #social_icons ul li.github a{
        background: url('/res/github.png') 0 50% no-repeat;
    }
    #social_icons ul li.gplus a{
        background: url('/res/gplus.png') 50% 50% no-repeat;
    }
    #social_icons ul li.tumblr a{
        background: url('/res/tumblr.png') 50% 50% no-repeat;
    }
</style>
<div id="media_container">
<div id="social_icons">
    <ul>
        <li class="github"><a href="https://github.com/larryhe" title="Check my projects on github">Github</a></li>
        <li class="fb"><a href="https://www.facebook.com/larry.he" title="Follow me on facebook">Facebook</a></li>
        <li class="twitter"><a href="https://twitter.com/larryhe" title="Follow me on twitter">Twitter</a></li>
        <li class="linkedin"><a href="http://www.linkedin.com/in/larryhe" title="Get more information on my linkedin profile">LinkedIn</a></li>
        <!--
        <li class="gplus"><a href="https://www.facebook.com/larry.he" title="Follow me on google plus">Google plus</a></li>
        <li class="tumblr"><a href="https://www.facebook.com/larry.he" title="Follow me on Tumblr">Tumblr</a></li>
        -->
    </ul>
</div>
</div>