weather-underground-icons
v1.0.0
Published
Weather Underground Icons
Downloads
432
Maintainers
Readme
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.
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 withblack
lines
<i class="wu wu-black wu-32 wu-chanceflurries"></i>
wu-white
icons withwhite
lines
<i class="wu wu-white wu-32 wu-chancerain"></i>
Icon Class Sizes:
wu-16
16x16px icons
<i class="wu wu-black wu-16 wu-chancesnow"></i>
wu-32
32x32px icons
<i class="wu wu-black wu-32 wu-chancetstorms"></i>
wu-64
64x64px icons
<i class="wu wu-black wu-64 wu-clear"></i>
wu-128
128x128px icons
<i class="wu wu-black wu-128 wu-cloudy"></i>
wu-256
256x256px icons
<i class="wu wu-black wu-256 wu-flurries"></i>
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