Mirrors/erikflowers_weather-icons
2
0
Fork 0
mirror of https://github.com/erikflowers/weather-icons.git synced 2025-10-12 07:22:11 -06:00
Code Issues Releases Wiki Activity

- adding weather underground

Browse Source 
- bumping version to 2.0.7
- removing cdnjs link
This commit is contained in:
Erik Flowers 2015-09-14 10:22:39 -07:00
parent 6156123f5f
commit b692b400e8
9 changed files with 180 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -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 `<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.

34
_docs/gh-pages/api-list.html
View File

@ -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>
@ -83,7 +83,7 @@
<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>
@ -101,7 +101,33 @@
<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>
@ -284,7 +310,7 @@
<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>

3
_docs/gh-pages/index.html
View File

@ -91,7 +91,7 @@
<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>
@ -106,7 +106,6 @@
<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>

52
_docs/jade/api-list.jade
View File

@ -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: <strong> day-storm-showers </strong>
li
| wi-yahoo-3200: <strong> stars </strong>
.col-sm-3
.col-sm-4
h1 Forecast.io
ul
li
@ -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
@ -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

4
_docs/jade/index.jade
View File

@ -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 &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

2
bower.json
View File

@ -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"

57
css/weather-icons.css
View File

@ -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
less/mappings/wi-wunderground.less
View File

@ -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
sass/mappings/wi-wunderground.scss
View File

@ -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; }