Forecast Font an amazing web-font that lets you create resizable multi-layered weather icons. This web-font is open to endless customisations like changing colours, size, and you even animate the web-fonts. Forecast font is fully scaleable on all devices, no need to worry about responsiveness or the pain in using css sprites.
Getting started with Forecast Font is easy. It used @font-face to reference in the CSS. For an example
@font-face {
font-family: "iconvault";
src: url("iconvault_forecastfont.eot");
src: url("iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
url("iconvault_forecastfont.woff") format("woff"),
url("iconvault_forecastfont.ttf") format("truetype"),
url("iconvault_forecastfont.svg#iconvault") format("svg");
font-weight: normal;
font-style: normal;
}
Icon CSS for creating single coloured icons
/* -----Sun----- */
.icon-sun::after {
content: "\f113";
color: rgb(255, 165, 0);
position: absolute;
}
To learn more about the integration, head over to http://forecastfont.iconvau.lt
