Social icons Bar

index.html

<ul class="social">
    <a class="fa Email" target="_blank" href="mailto:123@123.com" title="Email"></a>
    <a class="新浪微博" target="_blank" href="//weibo.com/yemzh" title="新浪微博"></a>
    <a class="GitHub" target="_blank" href="//github.com/MOxFIVE" title="GitHub"></a>
    <a class="V2EX" target="_blank" href="//www.v2ex.com/member/MOxFIVE" title="V2EX"></a>
    <a class="fa RSS" target="_blank" href="/atom.xml" title="RSS"></a>
    <a class="fa Twitter" target="_blank" href="//twitter.com/MOxFE" title="Twitter"></a>
</ul>

Social icons Bar.markdown

Social icons Bar

A Pen by MOxFIVE on CodePen.

License.

style.stylus

.social
    margin-top 2em
    font-family Arial
    text-align center
    a
        display inline-block
        width 50px
        height @width
        border-radius 50%
        font-size .68*@width
        line-height @width
        color white
        text-align center
        text-decoration none
        background #6f7170
        vertical-align middle

    img-logo = "新浪微博" #ecc260 80%,
                V2EX #e4cdb4 78%

    for i in img-logo
        .{i[0]}
            background: url('//moxfive.xyz/img/' + i[0] + '.png') center no-repeat i[1]
            background-size: i[2]

    .GitHub
        background url(//cdn.bootcss.com/logos/0.2.0/github-octocat.svg) no-repeat #e9edf0
        background-size 90%
        background-position 50% 100%

    // icon from Font Awesome
    font-logo = RSS f09e #ef7522, 
                Twitter f099 #55cff8,
                Email f003 #6fc0e4

    for i in font-logo
        .{i[0]}
            background i[2]
            &::before
                content '\' + i[1]

styles

<link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />