Forecast Fnt

A web-font for creating multi-layered weather icons

DOWNLOAD v1.2

What is Forecast Font?

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

Getting Started...

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("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;
	}
	

The icon css…

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;
	}


			
		

The html…

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 and any feedback or suggestions are more than welcome. If theres any icons you think I've missed (I'm aware already some are missing) or would like me to include in the next update please get in touch here. Thanks.

License

SIL open font license, MIT license for code. No attribution required, but much appreciated.

Get In Touch

info@iconvau.lt