diff --git a/README.md b/README.md index 9a1e651..737144f 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 ``. 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. diff --git a/_docs/gh-pages/api-list.html b/_docs/gh-pages/api-list.html index a9853b4..d97c33b 100644 --- a/_docs/gh-pages/api-list.html +++ b/_docs/gh-pages/api-list.html @@ -29,7 +29,7 @@
-
+

Yahoo

  • wi-yahoo-0: tornado
    • @@ -83,7 +83,7 @@

    Yahoo

  • wi-yahoo-3200: stars
-
+

Forecast.io

  • wi-forecast-io-clear-day: day-sunny
    • @@ -101,7 +101,33 @@

    Forecast.io

  • wi-forecast-io-tornado: tornado
-
+
+

Weather Underground

+
    +
  • wi-wu-chanceflurries snow-wind
    • +
  • wi-wu-chancerain rain
    • +
  • wi-wu-chancesleat sleet
    • +
  • wi-wu-chancesnow snow
    • +
  • wi-wu-chancetstorms thunderstorm
    • +
  • wi-wu-clear day-sunny
    • +
  • wi-wu-cloudy day-cloudy
    • +
  • wi-wu-flurries snow-wind
    • +
  • wi-wu-hazy day-haze
    • +
  • wi-wu-mostlycloudy day-cloudy
    • +
  • wi-wu-mostlysunny day-sunny
    • +
  • wi-wu-partlycloudy day-cloudy
    • +
  • wi-wu-partlysunny day-sunny
    • +
  • wi-wu-rain showers
    • +
  • wi-wu-sleat sleet
    • +
  • wi-wu-snow snow
    • +
  • wi-wu-sunny day-sunny
    • +
  • wi-wu-tstorms thunderstorm
    • +
  • wi-wu-unknown day-sunny
    • +
+
+
+
+

Open Weather Map

  • wi-owm-200: thunderstorm
    • @@ -284,7 +310,7 @@

    Open Weather Map

  • wi-owm-night-957: strong-wind
-
+

World Meteorological Organization

  • diff --git a/_docs/gh-pages/index.html b/_docs/gh-pages/index.html index 216a11d..2bc31ac 100644 --- a/_docs/gh-pages/index.html +++ b/_docs/gh-pages/index.html @@ -91,7 +91,7 @@

    Flip, Scale, Transform

    Popular Weather API Classes

    -

    Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization. View the list of API mappings here.

    +

    Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, Weather Underground, and World Meteorological Organization. View the list of API mappings here.

    Specialty Icons

    @@ -106,7 +106,6 @@

    Less and Sass Support

    Getting Started

    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 <i class="wi wi-night-sleet"></i>

    -

    Weather icons is also hosted on cdn.js, to use the CSS from there, just include:
    https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.1/css/weather-icons.min.css

    diff --git a/_docs/jade/api-list.jade b/_docs/jade/api-list.jade index 63d8dab..f706a16 100644 --- a/_docs/jade/api-list.jade +++ b/_docs/jade/api-list.jade @@ -32,7 +32,7 @@ html .container.api-list .row - .col-sm-3 + .col-sm-4 h1 Yahoo ul li @@ -133,7 +133,7 @@ html | wi-yahoo-47: day-storm-showers li | wi-yahoo-3200: stars - .col-sm-3 + .col-sm-4 h1 Forecast.io ul li @@ -162,8 +162,49 @@ html | wi-forecast-io-thunderstorm: thunderstorm li | wi-forecast-io-tornado: tornado - - .col-sm-3 + .col-sm-4 + h1 Weather Underground + ul + li + | wi-wu-chanceflurries snow-wind + li + | wi-wu-chancerain rain + li + | wi-wu-chancesleat sleet + li + | wi-wu-chancesnow snow + li + | wi-wu-chancetstorms thunderstorm + li + | wi-wu-clear day-sunny + li + | wi-wu-cloudy day-cloudy + li + | wi-wu-flurries snow-wind + li + | wi-wu-hazy day-haze + li + | wi-wu-mostlycloudy day-cloudy + li + | wi-wu-mostlysunny day-sunny + li + | wi-wu-partlycloudy day-cloudy + li + | wi-wu-partlysunny day-sunny + li + | wi-wu-rain showers + li + | wi-wu-sleat sleet + li + | wi-wu-snow snow + li + | wi-wu-sunny day-sunny + li + | wi-wu-tstorms thunderstorm + li + | wi-wu-unknown day-sunny + .row + .col-sm-4 h1 Open Weather Map ul li @@ -522,7 +563,8 @@ html | wi-owm-night-906: night-alt-hail li | wi-owm-night-957: strong-wind - .col-sm-3 + + .col-sm-4 h1 World Meteorological Organization ul li diff --git a/_docs/jade/index.jade b/_docs/jade/index.jade index 7704ea3..8fa95cf 100644 --- a/_docs/jade/index.jade +++ b/_docs/jade/index.jade @@ -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 @@ -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 <i class="wi wi-night-sleet"></i> - p Weather icons is also hosted on cdn.js, to use the CSS from there, just include:
    - code https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.1/css/weather-icons.min.css diff --git a/bower.json b/bower.json index 1e9d3c2..fe4515c 100755 --- a/bower.json +++ b/bower.json @@ -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" diff --git a/css/weather-icons.css b/css/weather-icons.css index c6e1350..a660a6b 100644 --- a/css/weather-icons.css +++ b/css/weather-icons.css @@ -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"; +} diff --git a/less/mappings/wi-wunderground.less b/less/mappings/wi-wunderground.less index f79abd6..acd4f54 100644 --- a/less/mappings/wi-wunderground.less +++ b/less/mappings/wi-wunderground.less @@ -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; } \ No newline at end of file +.@{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; } \ No newline at end of file diff --git a/sass/mappings/wi-wunderground.scss b/sass/mappings/wi-wunderground.scss index 07c315f..9230d53 100644 --- a/sass/mappings/wi-wunderground.scss +++ b/sass/mappings/wi-wunderground.scss @@ -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; } \ No newline at end of file +.#{$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; } \ No newline at end of file