Committing initial version of project
This commit is contained in:
Peter Schmalfeldt
131
README.md
131
README.md
@@ -1,2 +1,129 @@
|
||||
# weather-underground-icons
|
||||
Weather Underground Icons ( PNG & SVG )
|
||||
|
||||
|
||||
Weather Underground Icons
|
||||
======
|
||||
|
||||
These icons were designed by the Graphic Designer [Ashley Jager](http://www.ajager.com/#/weather-underground/). She created a beautiful [Adobe Illustrator](https://dribbble.com/shots/1879422-Weather-Underground-Icons) 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/](http://peter.build/weather-underground-icons/)
|
||||
|
||||
Usage Instructions
|
||||
---
|
||||
|
||||
[Weather Underground](https://www.wunderground.com/) has an [API](https://www.wunderground.com/weather/api/d/docs) 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:
|
||||
|
||||
```html
|
||||
<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](https://modernizr.com/) and the browser does not support SVG.
|
||||
|
||||
### Icon Class Colors:
|
||||
|
||||
* `wu-black` icons with `black` lines
|
||||
|
||||
```html
|
||||
<i class="wu wu-black wu-32 wu-chanceflurries"></i>
|
||||
```
|
||||
|
||||
|
||||
|
||||
* `wu-white` icons with `white` lines
|
||||
|
||||
```html
|
||||
<i class="wu wu-white wu-32 wu-chancerain"></i>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Icon Class Sizes:
|
||||
|
||||
* `wu-16` 16x16px icons
|
||||
|
||||
```html
|
||||
<i class="wu wu-black wu-16 wu-chancesnow"></i>
|
||||
```
|
||||
|
||||
|
||||
|
||||
* `wu-32` 32x32px icons
|
||||
|
||||
```html
|
||||
<i class="wu wu-black wu-32 wu-chancetstorms"></i>
|
||||
```
|
||||
|
||||
|
||||
|
||||
* `wu-64` 64x64px icons
|
||||
|
||||
```html
|
||||
<i class="wu wu-black wu-64 wu-clear"></i>
|
||||
```
|
||||
|
||||
|
||||
|
||||
* `wu-128` 128x128px icons
|
||||
|
||||
```html
|
||||
<i class="wu wu-black wu-128 wu-cloudy"></i>
|
||||
```
|
||||
|
||||
|
||||
|
||||
* `wu-256` 256x256px icons
|
||||
|
||||
```html
|
||||
<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 | label
|
||||
 | chancerain | label
|
||||
 | chancesleet | label
|
||||
 | chancesnow | label
|
||||
 | chancetstorms | label
|
||||
 | clear | label
|
||||
 | cloudy | label
|
||||
 | flurries | label
|
||||
 | fog | label
|
||||
 | hazy | label
|
||||
 | mostlycloudy | label
|
||||
 | mostlysunny | label
|
||||
 | partlycloudy | label
|
||||
 | partlysunny | label
|
||||
 | rain | label
|
||||
 | sleet | label
|
||||
 | snow | label
|
||||
 | sunny | label
|
||||
 | tstorms | label
|
||||
 | unknown | label
|
||||
|
||||
Icon Preview
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user