Meteocons Font is a typeface available in Truetype, OpenType format and a complete @font-face kit to be used freely in your projects.
Its use is very simple, once loaded font-face kits in the main css is already ready for use.
@font-face {
font-family: 'MeteoconsRegular';
src: url('meteocons-webfont.eot');
src: url('meteocons-webfont.eot?#iefix') format('embedded-opentype'),
url('meteocons-webfont.woff') format('woff'),
url('meteocons-webfont.ttf') format('truetype'),
url('meteocons-webfont.svg#MeteoconsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
HTML:
<a href="" data-icon="A">Link</a>
CSS:
[data-icon]:before {
font-family: 'MeteoconsRegular';
content: attr(data-icon);
}
OR:
HTML:
<a href="" class="icon" data-icon="A">Link</a>
CSS:
.icon:before {
font-family: 'MeteoconsRegular';
content: attr(data-icon);
}
You can also create you your own custom font, using only those icons you need in your project.
To create your own custom font, download and upload the svg icons in this fantastic app IcoMoon App, that gives you the opportunity to customize Meteocons as you wish.
You'll find all the information available to customize the fonts and how to use the application thanks to its complete documentation.
Download
(TTF + OTF + @font-face kit)