Mono Social Icons Font is a webfont based on Mono Social Icons, which includes ~100 social icons in three variations under one font : circled, rounded and regular.
This font comes with included liga feature for letter substitution of your icons. You can also use the unicode method for referring to the unicode places in the font table.
How To Use
HTML
<p>Twitter symbol : <span class='symbol'>circletwitterbird</span></p> <p>Twitter symbol with unicode : <span class='symbol'>&#xe286;</span></p> <p><a href='#' class='symbol' title='circletwitterbird'>Follow us</a></p> <p>Unicode : <a href='#' class='symbol' title='&#xe286;'>Follow us</a></p>
font-family: ‘Mono Social Icons Font’;
src: url(‘MonoSocialIconsFont-1.10.eot’);
src: url(‘MonoSocialIconsFont-1.10.eot?#iefix’) format(’embedded-opentype’),
url(‘MonoSocialIconsFont-1.10.woff’) format(‘woff’),
url(‘MonoSocialIconsFont-1.10.ttf’) format(‘truetype’),
url(‘MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont’) format(‘svg’);
src: url(‘MonoSocialIconsFont-1.10.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
.symbol, a.symbol:before {
font-family: ‘Mono Social Icons Font’;
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a.symbol:before {
content: attr(title);
margin-right: 0.3em;
font-size: 130%;
}[/php]
.symbol, a.symbol:before {
font-family: ‘Mono Social Icons Font’;
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a.symbol:before {
content: attr(title);
margin-right: 0.3em;
font-size: 130%;
}[/php]
