Curious about the magic behind Mono Social Icons and how it effortlessly displays the correct icon.
Unlike other font icon sets that require adding a class name to load a utf-8 character in :after, Mono Social Icons keeps it simple. Just add the icon as text and voila, the right icon appears with minimal CSS.
@font-face {
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 {
font-family: 'Mono Social Icons Font';
}
Now you can use the font like so:
<span class='symbol'>facebook</span>
The inner workings of Mono Social Icons remain a mystery to me.
If anyone knows the secret behind this seamless functionality, please do share!