Small Navigation Social Icons Widget

Small social media icon for top or bottom navigation.

<ul id="nav-social" class="navi">
    <li><a class="tag tag-rss" title="Subscribe to our RSS feed!" href="#"><i class="icon icon-rss icon-large"></i> <span>RSS</span></a>
    </li>
    <li><a class="tag tag-google" title="Circle us on Google+!" href="#"><i class="icon icon-google-plus icon-large"></i> <span>Google+</span></a>
    </li>
    <li><a class="tag tag-twitter" title="Follow us on Twitter!" href="#"><i class="icon icon-twitter icon-large"></i> <span>Twitter</span></a>
    </li>
    <li><a class="tag tag-facebook" title="Join our Facebook Page!" href="#"><i class="icon icon-facebook icon-large"></i> <span>Facebook</span></a>
    </li>
    <li><a class="tag tag-pinterest " title="Follow us on Pinterest!" href="#"><i class="icon icon-pinterest icon-large"></i> <span>Pinterest</span></a>
    </li>
</ul>

body{background:#222;}
a{font-weight:900;color:#FFF;text-decoration:none;transition:color .1s linear;}
#nav-social{list-style:none;}
#nav-social li{float:left;margin-left:10px;}
#nav-social span{display:none;}
#nav-social .tag{display:block;width:35px;height:35px;border-radius:4px;text-align:center;line-height:28px;}
#nav-social .tag-rss{background:#ffab00;}
#nav-social .tag-google{background:#e46044;}
#nav-social .tag-twitter{background:#00adff;}
#nav-social .tag-facebook{background:#4c70ab;}
#nav-social .tag-pinterest{background:#d73532;}
[class^=icon-],[class*=" icon-"]{text-align:center;vertical-align:middle;}

DEMO