The wind direction icons are 180 degrees off. It is understandable - unless you are a sailor you wouldn't know.

A south wind means the wind is coming from the south(pointing south), not blowing in a southerly direction.A northwest wind means the wind is coming from the northwest, not blowing in a northwest direction.

Etc - through all the wind direction icons.

Thank you. These are sweet icons.

I was making a UI using large icons to map to the weather condition. I was trying to get horizontal/vertical centering but while wi-day-sunny seems good for this wi-thunderstorm seems to have a bias towards the baseline. I imagine that many icons will be like that.

Any chance of supporting aligning the icons vertically? I am using these with React-Native so am lacking many CSS features, I could manually mess around with offsets I guess, but perhaps exporting the font icons vertically aligned by centering them on the baseline would work too? Is there a benefit to icons like wi-thunderstorm aligning to the baseline instead of like how wi-day-sunny is aligned vertically?

The "Gibbous" moon icons are inaccurate - the dark part should be concave, not convex.

See http://stardate.org/nightsky/moon for details. Compare 2014-09-03 through 2014-09-06 to wi-moon-waxing-gibbous

Also, why is quarter not a straight line?

EDIT: derp I can't even use the right words for concave and convex.

This PR rectifies the following:

• #7, #24, #53 - Add support for Weather codes
  • Added three weather service code mappings
    • #18 - Yahoo Weather
    • #61, #65 - OpenWeatherMap
    • #56 - Forecast.io
  • Mappings currently do not work in the LessCSS code base due to an issue with with variable interpolation during extend(). As such the bundled CSS is now built using the SASS code base in order to enable code mappings for CSS users.
    • More info: http://lesscss.org/features/#extend-feature-selector-interpolation-with-extend
• #35, #37, #60 - SASS styling
• #45 - Beaufort Wind Scale spelling
• #50 - Fixed width class

This PR contains the following changes:

• Added Gulp and corresponding gulpfile.js with the following tasks:
  • sass - compiles SASS source and outputs to ./css/
  • less - compiled LessCSS source and outputs to ./css/
  • mini - minifies ./css/weather-icons.css and outputs to ./css/weather-icons.min.css
• Taxonomy change to more closely match FontAwesome
• Add SASS language support
• Refactor LessCSS code base to match features of SASS code base
  • Condition code mapping does not currently function on the LessCSS code base: http://lesscss.org/features/#extend-feature-selector-interpolation-with-extend
• Major version bump due to:
  • Breaking changes to rotation class names
  • font-family is no longer customizable and is locked to WeatherIcon
  • Rotation syntax has been simplified from .wi-wind-default_*-deg .wi-rotate-*
  • .wind-beafort-* has been renamed .wind-beaufort-* to rectify a typo
  • Prefixed directional icons with .direction-
    • .down becomes .direction-down
    • .down-left becomes .direction-down-left
    • .down-right becomes .direction-down-right
    • .left becomes .direction-left
    • .right becomes .direction-right
    • .up becomes .direction-up
    • .up-left becomes .direction-up-left
    • .up-right becomes .direction-up-right

First thank you for your work, these icons look absolutely amazing!

However, i encountered one problem on all platforms, i tried to use them (web and Android): The icons doesn't always fit their calculated bounds. Some examples:

On the web:

some extra css to make the problem visible:

.test-icon{
    font-size: 100px; 
    color:white
}
.test-container{
    background-color: black; 
    border: 1px solid gray; 
    display: inline-block; 
    margin: 10px
}

The markup

<div class="test-container">
    <i class="wi-day-hail test-icon"></i>
</div>
<div class="test-container">
    <i class="wi-day-cloudy test-icon"></i>
</div>
<div class="test-container">
    <i class="wi-day-sunny test-icon"></i>
</div>
<div class="test-container">
    <i class="wi-day-sunny-overcast test-icon"></i>
</div>

which looks like this on firefox & chrome:

On the web i can easily solve this problem with a little bit of extra padding, because the rest of the icon (what is not visible on my image) gets rendered at least.

On (native) Android

The problem here is far worse. When i simply put these icons in a TextView (if you are not familiar with android, it's the default control, for displaying plain text), it looks like this:

So the icon gets cropped, and some of it doesn't even gets rendered.

So my question is: Is there a way to make the icons fit their bounds? I'm really not familiar with fonts and how they get rendered, or how their bounding rectangle gets calculated, but if you know any hints/links, i would be happy to try and solve this issue!

And again, thanks for the beautiful icons!

I added LESS/CSS variable names with weather condition codes according to World Meteorological Organization's code manual used in weather stations and also the Yahoo API codes made by @aphillipo in #18. Also related #24 #7. The WMO code associations done by me are approximations, I couldn't find 100% fitting icons on some codes. For example codes 00 ("No significant weather observed") and 02 ("State of sky on the whole unchanged during the past hour"), and also some of the gradients (light/medium/heavy rain).

I put them in separate files so that they can be easily commented out if you wish to compile a file without them, or only require a subset of (this project's) weather icons names OR Yahoo OR WMO4680.

I'm a LESS novice so there's probably a better way to name or generate them.

I also added two test tables for Yahoo & WMO4860 codes with their respective descriptions, and a Windows .bat script for quick compiling.

Screenshot list Yahoo:

Screenshot list WMO:

Added .wi-condition- to icons and appropriate lookups.

See https://developer.yahoo.com/weather/#codes for details of the codes.

You don't have to like it of course or merge it - just making you aware that this might be useful to someone.

The new moon icons in 1.2 are great. I'd love to see an addition of these moon icons inverted, with something like wi-moon-alt-waxing-quarter or wi-moon-inverse-old

When displaying the moon with a light color on a dark background (as in a bright white moon against the black of space), the area which appears illuminated is the opposite of what one would expect. For example, with a style of "color:#fff; background-color:#000" for wi-moon-full, you get a donut, not a disc.

Hey, guys!

I needed to override the path to fonts directory and found a variable in sources - $wi-path (here). I've tried to override it before importing the main SCSS file of the package but failed. Then I've looked carefully again and found out that it can not be overridden due to missing !default after its value. This applies to all those variables next to $wi-path. I can submit a PR.

`bower info weather-icons bower cached git://github.com/erikflowers/weather-icons.git#0.0.1 bower validate 0.0.1 against git://github.com/erikflowers/weather-icons.git#*

{ name: 'weather-icons', homepage: 'https://github.com/erikflowers/weather-icons', version: '0.0.1' }

Available versions:

• 0.0.1 `

I can't seem to be able to spin some of the icons without some parts being cut off, looked in the dev console and it looks like when it is spun the width is not wide enough. Have tried some hacks but hasn't worked. Tried to use fontawesome's 'fa-spin' and a css spin i wrote but none fixed it Thanks

These icons are really useful, but they don't match the theme of my project. My project is quite minimal and light, and these icons are too thick. Maybe consider making a font weight 300?

Recently, I retrieved the following response for current weather for my location:

'weather': [{'id': 803, 'main': 'Clouds', 'description': 'broken clouds', 'icon': '04d'}], 'base': 'stations', 'main': {'temp': 282.54, 'feels_like': 282.54, 'temp_min': 279.47, 'temp_max': 285.29, 'pressure': 1018, 'humidity': 85}, 'visibility': 10000, 'wind': {'speed': 0.45, 'deg': 0, 'gust': 1.79}, 'clouds': {'all': 75} [...snip...]

Note that the wind speed (in m/s) is 0.45 average and 1.79 gust, or 0.9 kts average and 3.5 knots gust. This is not a windy or gusty day. I think a gusty day would be at least 15 kts.

I suggest instead that the "cloudy" (and day-cloudy/night-cloudy variants) are a better mapping than "cloudy-gusts".

I could open a pull request with this change but wanted to gather and feedback first. Thank you!

What about icons symboling polar twilight (Polar twilight occurs in areas that are located at the inner border of the polar circles, where the Sun will be on or below the horizon).

E.g. similar to the symbols uses by the Yr Icons Api, a horizontal line above the icon: https://api.met.no/weatherapi/weathericon/2.0/documentation

The api mapping for OpenWeather doesn't correctly adjust for day/night on codes 803 and 804, instead pointing to same icon as the neutral mapping.

Neutral:

.wi-owm-803:before {
  content: "\f013";
}
.wi-owm-night-804:before {
  content: "\f013";
}

Day:

.wi-owm-day-803:before {
  content: "\f013";
}
.wi-owm-day-804:before {
  content: "\f013";
}

Night:

.wi-owm-night-803:before {
  content: "\f013";
}
.wi-owm-night-804:before {
  content: "\f013";
}

I believe day should be using f002 and night should be using f086.

Additionally, for consistency with the night icon, I believe the mapping for .wi-owm-day-801 should be changed to icon f00c.

Hi,

I dig your icons very much, however I find it slightly difficult to find an optimal size and placement. I think it might be a good idea to make a rectangle icon that would represent the maximum size for all available icons (or maybe at least all weather icons?).

Anyway, thanks for your great work.