Forecast Font is a web-font for creating multi-layered weather icons. It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style. Flat, single-colour icons might be what your after and thats cool but with Forecast font you have all the flexibility to colour, style or even animate various parts of the icons. Create something a little different from the norm. Even better they are fully scalable for use on all devices, no need to create cumbersome image sprites or use multiple images to create your weather icons.
Mist
Sunrise
Sunny
Sunset
Moon
Cloudy
Drizzle
Drizzle, Sunny
Drizzle, Night
Raining
Raining, Sunny
Raining, Night
Snowing
Snowing, Sunny
Snowing, Night
Showers
Showers, Sunny
Showers, Night
Thunder
Thunder, Sunny
Thunder, Night
Frosty
Frosty, Sunny
Frosty, Night
Hail
Hail, Sunny
Hail, Night
Sleet
Sleet, Sunny
Sleet, Night
Windy
Windy, Sunny
Windy, Night
Windy, Raining
Windy, Raining, Sunny
Windy, Raining, Night
Windy, Snowing
Windy, Snowing, Sunny
Windy, Snowing, Night
Implementing Forecast Font is very simple all you need to do first is reference Forecast Font in your css using @font-face and the css included in the download. From there you make sure to correct the paths needed for where you store these files.
@font-face {
font-family: "iconvault";
src: url(https://webdesignbestfirm.com/files/iconvault_forecastfont.eot);
src: url(https://webdesignbestfirm.com/files/https://webdesignbestfirm.com/files/iconvault_forecastfont.eot?#iefix) format("embedded-opentype"),
url(https://webdesignbestfirm.com/files/iconvault_forecastfont.woff) format("woff"),
url(https://webdesignbestfirm.com/files/iconvault_forecastfont.ttf) format("truetype"),
url(https://webdesignbestfirm.com/files/iconvault_forecastfont.svg) format("svg");
font-weight: normal;
font-style: normal;
}
Here are a couple of examples showing how to to use the css to create the single-colour icons and the more complex of the icons with multiple colours.
/* -----Sun----- */
.icon-sun::after {
content: "f113";
color: rgb(255, 165, 0);
position: absolute;
}
/* -----BaseCloud----- */
.basecloud {
font-family: 'iconvault';
font-size:6em;
content: 'f105';
position:absolute;
color: rgb(204, 204, 204);
}
/* -----Showers----- */
.icon-showers::before {
content: "f104";
position:absolute;
color:#82b2e4;
}
/* -----Sunny----- */
.icon-sunny::after {
content: "f101";
color: rgb(255, 165, 0);
position: absolute;
}
Here you can see how easy it is to incorporate Forecast Font icons into your designs. Below is how you would markup a single-colour Sunny Icon and a multi-layered Sunny with Showers icon.
This is a simple Sunny icon.
This icon shows Sunny with Showers.
Forecastfont was created to demonstrate the capabilities of using my final year project Iconvaul.lt. If you liked this please do check it out, Forecastfont is still an evolving project as is Iconvault. Thanks.