Weather Underground

Weather Underground Icons

These icons were designed by the Graphic Designer Ashley Jager. She created a beautiful Adobe Illustrator file. This project simply breaks that file up into web icon that can be used in your projects.

tstorms

Demo Website

http://peter.build/weather-underground-icons/

Usage Instructions

Weather Underground has an API where you can fetch data remotely. The API returns an icon parameter as part of their JSON response that you can use to load custom icons.

Image Usage Instructions

If you just want to use the image files directly, and not use the CSS file you can just copy over the images directly from the dist/icons folder. See the Icon Key below to see which icons will be used.

CSS Usage Instructions

If you wish to use the use the CSS version of this project, you just need to copy this dist folder into your project.

Then you can use the icon keys with a wu- prefix to load whichever icon you want:

<i class="wu wu-white wu-64 wu-chanceflurries"></i>

All CSS Icons will default to using SVG files. However, you can use PNG sprites by adding a no-svg class to the parent element that contains the weather icons. no-svg classnames will be added to your HTML tag automatically if you are using Modernizr and the browser does not support SVG.

Icon Class Colors:

wu-black icons with black lines

<i class="wu wu-black wu-32 wu-chanceflurries"></i>

tstorms

wu-white icons with white lines

<i class="wu wu-white wu-32 wu-chancerain"></i>

tstorms

Icon Class Sizes:

wu-16 16x16px icons

<i class="wu wu-black wu-16 wu-chancesnow"></i>

chancesnow

wu-32 32x32px icons

<i class="wu wu-black wu-32 wu-chancetstorms"></i>

chancetstorms

wu-64 64x64px icons

<i class="wu wu-black wu-64 wu-clear"></i>

clear

wu-128 128x128px icons

<i class="wu wu-black wu-128 wu-cloudy"></i>

cloudy

wu-256 256x256px icons

<i class="wu wu-black wu-256 wu-flurries"></i>

flurries

Icon Key

Here are the icon options for each weather option:

ICON	KEY	DESCRIPTION
	chanceflurries	Chance of Flurries
	chancerain	Chance of Rain
	chancesleet	Chance Freezing Rain
	chancesnow	Chance of Snow
	chancetstorms	Chance of Thunderstorms
	clear	Clear
	cloudy	Cloudy
	flurries	Flurries
	fog	Fog
	hazy	Haze
	mostlycloudy	Mostly Cloudy
	mostlysunny	Mostly Sunny
	partlycloudy	Partly Cloudy
	partlysunny	Partly Sunny
	rain	Rain
	sleet	Freezing Rain
	snow	Snow
	sunny	Sunny
	tstorms	Thunderstorms
	unknown	Unknown

npm