Skip to content

Commit

Permalink
- adding weather underground
Browse files Browse the repository at this point in the history
- bumping version to 2.0.7
- removing cdnjs link
  • Loading branch information
erikflowers committed Sep 14, 2015
1 parent 6156123 commit b692b40
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 54 deletions.
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Weather Icons
*Version 2.0.5 - August 26, 2015*
*Version 2.0.7 - September 14th, 2015*

## 222 Weather Themed Icons and CSS

Expand All @@ -17,6 +17,10 @@ The icons are displayed by using an `i` element and adding the base class `wi` a

To add a modifier, include the class you want after the icon name, which looks like `<i class="wi wi-day-sunny wi-flip-vertical"></i>`. You can flip, rotate, or add a fixed with. See it all at [http://weathericons.io](http://weathericons.io).

## API Usage

This set includes companion CSS files for popular weather service API. Presently there are mappings for Forecast.io, Open Weather Map, World Meteorological Organization, Weather Underground, and Yahoo. Check the [API List](https://erikflowers.github.io/weather-icons/api-list.html) to see the class names.

## Wind Usage

To use the wind indicators, you must also use `weather-icons-wind.min.css` along with the default CSS file. To dispay a wind indicator, you must use the base class `wi` and `wi-wind`, and then include the towards/from direction you want, like `from-293-deg`. This ends up looking like . You can use any degree from 0 to 359 in this manner. **Note:** A "from" class has the point of the arrow at the opposite end of the degree. For example, a "from 90 degrees" icon would point to the 270 degree mark, wheras a "towards 270 degrees" would point at the same 270 degree mark.
Expand Down
34 changes: 30 additions & 4 deletions _docs/gh-pages/api-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<body></body>
<div class="container api-list">
<div class="row">
<div class="col-sm-3">
<div class="col-sm-4">
<h1>Yahoo</h1>
<ul>
<li>wi-yahoo-0: <strong> tornado </strong></li>
Expand Down Expand Up @@ -83,7 +83,7 @@ <h1>Yahoo</h1>
<li>wi-yahoo-3200: <strong> stars </strong></li>
</ul>
</div>
<div class="col-sm-3">
<div class="col-sm-4">
<h1>Forecast.io</h1>
<ul>
<li>wi-forecast-io-clear-day: <strong> day-sunny </strong></li>
Expand All @@ -101,7 +101,33 @@ <h1>Forecast.io</h1>
<li>wi-forecast-io-tornado: <strong> tornado </strong></li>
</ul>
</div>
<div class="col-sm-3">
<div class="col-sm-4">
<h1>Weather Underground</h1>
<ul>
<li>wi-wu-chanceflurries <strong>snow-wind</strong></li>
<li>wi-wu-chancerain <strong>rain</strong></li>
<li>wi-wu-chancesleat <strong>sleet</strong></li>
<li>wi-wu-chancesnow <strong>snow</strong></li>
<li>wi-wu-chancetstorms <strong>thunderstorm</strong></li>
<li>wi-wu-clear <strong>day-sunny</strong></li>
<li>wi-wu-cloudy <strong>day-cloudy</strong></li>
<li>wi-wu-flurries <strong>snow-wind</strong></li>
<li>wi-wu-hazy <strong>day-haze</strong></li>
<li>wi-wu-mostlycloudy <strong>day-cloudy</strong></li>
<li>wi-wu-mostlysunny <strong>day-sunny</strong></li>
<li>wi-wu-partlycloudy <strong>day-cloudy</strong></li>
<li>wi-wu-partlysunny <strong>day-sunny</strong></li>
<li>wi-wu-rain <strong>showers</strong></li>
<li>wi-wu-sleat <strong>sleet</strong></li>
<li>wi-wu-snow <strong>snow</strong></li>
<li>wi-wu-sunny <strong>day-sunny</strong></li>
<li>wi-wu-tstorms <strong>thunderstorm</strong></li>
<li>wi-wu-unknown <strong>day-sunny</strong></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h1>Open Weather Map</h1>
<ul>
<li>wi-owm-200: <strong> thunderstorm </strong></li>
Expand Down Expand Up @@ -284,7 +310,7 @@ <h1>Open Weather Map</h1>
<li>wi-owm-night-957: <strong> strong-wind </strong></li>
</ul>
</div>
<div class="col-sm-3">
<div class="col-sm-4">
<h1>World Meteorological Organization</h1>
<ul>
<li>
Expand Down
3 changes: 1 addition & 2 deletions _docs/gh-pages/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ <h3><i class="wi wi-night-rain"></i>Flip, Scale, Transform</h3>
<div class="row">
<div class="col-sm-4">
<h3><i class="wi wi-earthquake"></i>Popular Weather API Classes</h3>
<p>Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization. <a href="api-list.html">View the list of API mappings here.</a></p>
<p>Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, Weather Underground, and World Meteorological Organization. <a href="api-list.html">View the list of API mappings here.</a></p>
</div>
<div class="col-sm-4">
<h3><i class="wi wi-thunderstorm"></i>Specialty Icons</h3>
Expand All @@ -106,7 +106,6 @@ <h3><i class="wi wi-volcano from-270-deg"></i>Less and Sass Support</h3>
<div class="col-sm-12">
<div class="section-title">Getting Started</div>
<p>To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type <code>&lt;i class="wi wi-night-sleet"&gt;&lt;/i&gt;</code></p>
<p>Weather icons is also hosted on cdn.js, to use the CSS from there, just include:<br><code>https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.1/css/weather-icons.min.css</code></p>
</div>
</div>
</div>
Expand Down
52 changes: 47 additions & 5 deletions _docs/jade/api-list.jade
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ html

.container.api-list
.row
.col-sm-3
.col-sm-4
h1 Yahoo
ul
li
Expand Down Expand Up @@ -133,7 +133,7 @@ html
| wi-yahoo-47: <strong> day-storm-showers </strong>
li
| wi-yahoo-3200: <strong> stars </strong>
.col-sm-3
.col-sm-4
h1 Forecast.io
ul
li
Expand Down Expand Up @@ -162,8 +162,49 @@ html
| wi-forecast-io-thunderstorm: <strong> thunderstorm </strong>
li
| wi-forecast-io-tornado: <strong> tornado </strong>

.col-sm-3
.col-sm-4
h1 Weather Underground
ul
li
| wi-wu-chanceflurries <strong>snow-wind</strong>
li
| wi-wu-chancerain <strong>rain</strong>
li
| wi-wu-chancesleat <strong>sleet</strong>
li
| wi-wu-chancesnow <strong>snow</strong>
li
| wi-wu-chancetstorms <strong>thunderstorm</strong>
li
| wi-wu-clear <strong>day-sunny</strong>
li
| wi-wu-cloudy <strong>day-cloudy</strong>
li
| wi-wu-flurries <strong>snow-wind</strong>
li
| wi-wu-hazy <strong>day-haze</strong>
li
| wi-wu-mostlycloudy <strong>day-cloudy</strong>
li
| wi-wu-mostlysunny <strong>day-sunny</strong>
li
| wi-wu-partlycloudy <strong>day-cloudy</strong>
li
| wi-wu-partlysunny <strong>day-sunny</strong>
li
| wi-wu-rain <strong>showers</strong>
li
| wi-wu-sleat <strong>sleet</strong>
li
| wi-wu-snow <strong>snow</strong>
li
| wi-wu-sunny <strong>day-sunny</strong>
li
| wi-wu-tstorms <strong>thunderstorm</strong>
li
| wi-wu-unknown <strong>day-sunny</strong>
.row
.col-sm-4
h1 Open Weather Map
ul
li
Expand Down Expand Up @@ -522,7 +563,8 @@ html
| wi-owm-night-906: <strong> night-alt-hail </strong>
li
| wi-owm-night-957: <strong> strong-wind </strong>
.col-sm-3

.col-sm-4
h1 World Meteorological Organization
ul
li
Expand Down
4 changes: 1 addition & 3 deletions _docs/jade/index.jade
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ html
h3
i.wi.wi-earthquake
| Popular Weather API Classes
p Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization.
p Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, Weather Underground, and World Meteorological Organization.
a(href="api-list.html") View the list of API mappings here.
.col-sm-4
h3
Expand All @@ -124,8 +124,6 @@ html
.section-title Getting Started
p To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type
code &lt;i class="wi wi-night-sleet"&gt;&lt;/i&gt;
p Weather icons is also hosted on cdn.js, to use the CSS from there, just include:<br>
code https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.1/css/weather-icons.min.css



Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "weather-icons",
"version": "2.0.5",
"version": "2.0.7",
"homepage": "http://erikflowers.github.io/weather-icons/",
"keywords": [
"css", "icon-font", "weather", "icon", "icons"
Expand Down
57 changes: 57 additions & 0 deletions css/weather-icons.css
Original file line number Diff line number Diff line change
Expand Up @@ -1779,3 +1779,60 @@
.wi-owm-night-957:before {
content: "\f050";
}
.wi-wu-chanceflurries:before {
content: "\f064";
}
.wi-wu-chancerain:before {
content: "\f019";
}
.wi-wu-chancesleat:before {
content: "\f0b5";
}
.wi-wu-chancesnow:before {
content: "\f01b";
}
.wi-wu-chancetstorms:before {
content: "\f01e";
}
.wi-wu-clear:before {
content: "\f00d";
}
.wi-wu-cloudy:before {
content: "\f002";
}
.wi-wu-flurries:before {
content: "\f064";
}
.wi-wu-hazy:before {
content: "\f0b6";
}
.wi-wu-mostlycloudy:before {
content: "\f002";
}
.wi-wu-mostlysunny:before {
content: "\f00d";
}
.wi-wu-partlycloudy:before {
content: "\f002";
}
.wi-wu-partlysunny:before {
content: "\f00d";
}
.wi-wu-rain:before {
content: "\f01a";
}
.wi-wu-sleat:before {
content: "\f0b5";
}
.wi-wu-snow:before {
content: "\f01b";
}
.wi-wu-sunny:before {
content: "\f00d";
}
.wi-wu-tstorms:before {
content: "\f01e";
}
.wi-wu-unknown:before {
content: "\f00d";
}
38 changes: 19 additions & 19 deletions less/mappings/wi-wunderground.less
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
.@{$wi-css-prefix}-chanceflurries:before { content: $snow-wind; }
.@{$wi-css-prefix}-chancerain:before { content: $rain; }
.@{$wi-css-prefix}-chancesleat:before { content: $sleet; }
.@{$wi-css-prefix}-chancesnow:before { content: $snow; }
.@{$wi-css-prefix}-chancetstorms:before { content: $thunderstorm; }
.@{$wi-css-prefix}-clear:before { content: $day-sunny; }
.@{$wi-css-prefix}-cloudy:before { content: $day-cloudy; }
.@{$wi-css-prefix}-flurries:before { content: $snow-wind; }
.@{$wi-css-prefix}-hazy:before { content: $day-haze; }
.@{$wi-css-prefix}-mostlycloudy:before { content: $day-cloudy; }
.@{$wi-css-prefix}-mostlysunny:before { content: $day-sunny; }
.@{$wi-css-prefix}-partlycloudy:before { content: $day-cloudy; }
.@{$wi-css-prefix}-partlysunny:before { content: $day-sunny; }
.@{$wi-css-prefix}-rain:before { content: $showers; }
.@{$wi-css-prefix}-sleat:before { content: $sleet; }
.@{$wi-css-prefix}-snow:before { content: $snow; }
.@{$wi-css-prefix}-sunny:before { content: $day-sunny; }
.@{$wi-css-prefix}-tstorms:before { content: $thunderstorm; }
.@{$wi-css-prefix}-unknown:before { content: $day-sunny; }
.@{wi-css-prefix}-wu-chanceflurries:before { content: @snow-wind; }
.@{wi-css-prefix}-wu-chancerain:before { content: @rain; }
.@{wi-css-prefix}-wu-chancesleat:before { content: @sleet; }
.@{wi-css-prefix}-wu-chancesnow:before { content: @snow; }
.@{wi-css-prefix}-wu-chancetstorms:before { content: @thunderstorm; }
.@{wi-css-prefix}-wu-clear:before { content: @day-sunny; }
.@{wi-css-prefix}-wu-cloudy:before { content: @day-cloudy; }
.@{wi-css-prefix}-wu-flurries:before { content: @snow-wind; }
.@{wi-css-prefix}-wu-hazy:before { content: @day-haze; }
.@{wi-css-prefix}-wu-mostlycloudy:before { content: @day-cloudy; }
.@{wi-css-prefix}-wu-mostlysunny:before { content: @day-sunny; }
.@{wi-css-prefix}-wu-partlycloudy:before { content: @day-cloudy; }
.@{wi-css-prefix}-wu-partlysunny:before { content: @day-sunny; }
.@{wi-css-prefix}-wu-rain:before { content: @showers; }
.@{wi-css-prefix}-wu-sleat:before { content: @sleet; }
.@{wi-css-prefix}-wu-snow:before { content: @snow; }
.@{wi-css-prefix}-wu-sunny:before { content: @day-sunny; }
.@{wi-css-prefix}-wu-tstorms:before { content: @thunderstorm; }
.@{wi-css-prefix}-wu-unknown:before { content: @day-sunny; }
38 changes: 19 additions & 19 deletions sass/mappings/wi-wunderground.scss
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
.#{$wi-css-prefix}-chanceflurries:before { content: $snow-wind; }
.#{$wi-css-prefix}-chancerain:before { content: $rain; }
.#{$wi-css-prefix}-chancesleat:before { content: $sleet; }
.#{$wi-css-prefix}-chancesnow:before { content: $snow; }
.#{$wi-css-prefix}-chancetstorms:before { content: $thunderstorm; }
.#{$wi-css-prefix}-clear:before { content: $day-sunny; }
.#{$wi-css-prefix}-cloudy:before { content: $day-cloudy; }
.#{$wi-css-prefix}-flurries:before { content: $snow-wind; }
.#{$wi-css-prefix}-hazy:before { content: $day-haze; }
.#{$wi-css-prefix}-mostlycloudy:before { content: $day-cloudy; }
.#{$wi-css-prefix}-mostlysunny:before { content: $day-sunny; }
.#{$wi-css-prefix}-partlycloudy:before { content: $day-cloudy; }
.#{$wi-css-prefix}-partlysunny:before { content: $day-sunny; }
.#{$wi-css-prefix}-rain:before { content: $showers; }
.#{$wi-css-prefix}-sleat:before { content: $sleet; }
.#{$wi-css-prefix}-snow:before { content: $snow; }
.#{$wi-css-prefix}-sunny:before { content: $day-sunny; }
.#{$wi-css-prefix}-tstorms:before { content: $thunderstorm; }
.#{$wi-css-prefix}-unknown:before { content: $day-sunny; }
.#{$wi-css-prefix}-wu-chanceflurries:before { content: $snow-wind; }
.#{$wi-css-prefix}-wu-chancerain:before { content: $rain; }
.#{$wi-css-prefix}-wu-chancesleat:before { content: $sleet; }
.#{$wi-css-prefix}-wu-chancesnow:before { content: $snow; }
.#{$wi-css-prefix}-wu-chancetstorms:before { content: $thunderstorm; }
.#{$wi-css-prefix}-wu-clear:before { content: $day-sunny; }
.#{$wi-css-prefix}-wu-cloudy:before { content: $day-cloudy; }
.#{$wi-css-prefix}-wu-flurries:before { content: $snow-wind; }
.#{$wi-css-prefix}-wu-hazy:before { content: $day-haze; }
.#{$wi-css-prefix}-wu-mostlycloudy:before { content: $day-cloudy; }
.#{$wi-css-prefix}-wu-mostlysunny:before { content: $day-sunny; }
.#{$wi-css-prefix}-wu-partlycloudy:before { content: $day-cloudy; }
.#{$wi-css-prefix}-wu-partlysunny:before { content: $day-sunny; }
.#{$wi-css-prefix}-wu-rain:before { content: $showers; }
.#{$wi-css-prefix}-wu-sleat:before { content: $sleet; }
.#{$wi-css-prefix}-wu-snow:before { content: $snow; }
.#{$wi-css-prefix}-wu-sunny:before { content: $day-sunny; }
.#{$wi-css-prefix}-wu-tstorms:before { content: $thunderstorm; }
.#{$wi-css-prefix}-wu-unknown:before { content: $day-sunny; }

0 comments on commit b692b40

Please sign in to comment.