socials

Social icons

Preview

Open demo.html to see a list of all the glyphs in your font along with their codes/ligatures.

Usage

HTML

<divclass="social-container"><ulclass="nav social-links-nav"><li><ahref="#" target="_blank" title="Follow us on Facebook"><spanclass="icon icon-facebook"></span></a></li><li><ahref="#" target="_blank" title="Follow us on Twitter"><spanclass="icon icon-twitter"></span></a></li><li><ahref="#" target="_blank" title="Follow our RSS feed"><spanclass="icon icon-rss"></span></a></li><li><ahref="#" target="_blank" title="Follow our Mail RSS feed"><spanclass="icon icon-mail"></span></a></li><li><ahref="#" target="_blank" title="Follow us on YouTube"><spanclass="icon icon-youtube"></span></a></li><li><ahref="#" target="_blank" title="Follow us on GooglePlus"><spanclass="icon icon-googleplus"></span></a></li></ul></div>

Sass

.social-links-nav {
// include some clear fix helper here// @include cf;li {
float: left;
}
a {
display: block;
}
$icons-set: (
'facebook',
'twitter',
'rss',
'mail',
'youtube',
'googleplus'
);
@each $iconin $icons-set {
.icon-#{$icon} { @include social-icon-before($icon); }
}
}