erikflowers/weather-icons

215 Weather Themed Icons and CSS

Weather Icons

222 Weather Themed Icons and CSS

Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons!

Get started at https://erikflowers.github.io/weather-icons/!

Basic Usage

Place the 5 font files and the main weather-icons.min.css file in your project, with the assumption that the fonts are located up ../ from your CSS directory.

The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny. This then looks like <i class="wi wi-day-sunny"></i>.

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 width. See it all at https://erikflowers.github.io/weather-icons/.

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 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 display 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.

Included in the set as well are aliases to point to cardinal directions. They work the same as degrees, for example <i class="wi wi-wind towards-sse"></i> would be an arrow pointing to the South by Southeast (roughly 158 degrees).

Contributing

If you feel so inclined to add icon ideas, icon art, or other fixes/changes to how the package works, feel free to help!

Credit

The icon designs are originally by Lukas Bischoff. Icon art for v1.1 forward, HTML, Less, and CSS are by me (Erik).

Licensing

• Weather Icons licensed under SIL OFL 1.1
• Code licensed under MIT License
• Documentation licensed under CC BY 3.0

weather-icons's Issues

SASS styling

Is there any chance we can have a sass version of the CSS?

Cardinal wind directions

I had 2 problems with the wind direction icons:

1. I don't deal in degees, I deal in cardinal directions (N, SSE, etc)
2. There are no exact matches in degrees, to all cardinal points

So I've created a little mixin, .wind-direction. The mixin will create all 16 cardinal points, and their inverse classes in case people are backwards:

.wi-wind-default{
    .wind-direction('n';    's';    0);
    .wind-direction('nne';  'ssw';  1);
    .wind-direction('ne';   'sw';   2);
    .wind-direction('ene';  'wsw';  3);
    .wind-direction('e';    'w';    4);
    .wind-direction('ese';  'wnw';  5);
    .wind-direction('se';   'nw';   6);
    .wind-direction('see';  'nnw';  7);
}

/* Wind direction mix-in */
.wind-direction(@title;@opposite;@slice){
    @rotation:          360deg/16 * @slice;
    @opposite_rotation: 360deg/16 * (@slice + 8);
    @escaped_title:     e(@title);
    @escaped_opposite:  e(@opposite);

    &._@{escaped_title},
    &._@{escaped_opposite}-inverse{
        .wind-rotate(@rotation);
    }

    &._@{escaped_opposite},
    &._@{escaped_title}-inverse{
        .wind-rotate(@opposite_rotation);
    }
}
/* Included .wind-rotate from the project LESS, as I'm not compiling from your LESS files */
.wind-rotate(@degrees){
    -webkit-transform: rotate(@degrees);
    -moz-transform: rotate(@degrees);
    -ms-transform: rotate(@degrees);
    -o-transform: rotate(@degrees);
    transform: rotate(@degrees);
}

The CSS it generates looks like:

.wi-wind-default._n,
.wi-wind-default._s-inverse {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.wi-wind-default._s,
.wi-wind-default._n-inverse {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.wi-wind-default._nne,
.wi-wind-default._ssw-inverse {
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  -ms-transform: rotate(22.5deg);
  -o-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}
.wi-wind-default._ssw,
.wi-wind-default._nne-inverse {
  -webkit-transform: rotate(202.5deg);
  -moz-transform: rotate(202.5deg);
  -ms-transform: rotate(202.5deg);
  -o-transform: rotate(202.5deg);
  transform: rotate(202.5deg);
}

I'm happy to modify and submit this as a pull request if you're interested.

Must end <i> tag

In all of the examples I could find (on GitHub and the website), they did not end the <i> tag. For example, they should all end with </i>

First of all, this is a rule of HTML, second, on my site, it led to the icons appearing multiple times to fill up the parent container and disrupting the fonts following the tag.

<i class="wi-day-cloudy"></i> <!-- Correct -->
<i class="wi-day-cloudy"> <!-- Incorrect -->

Just a heads up. Thanks!

glyph needs trimmed on icons

wi-night-sleet
wi-night-alt-cloudy
wi-night-snow-thunderstorm

Single cloud

Hi! :)

If possible, could you add, on a next release a new "cloud".
Similar to wi-cloudy but only with one cloud? and not open like the one in "wi-cloud".

tnksss :)

Beaufort Wind Scale Spelling

beafort should be beaufort
http://en.wikipedia.org/wiki/Beaufort_scale

Add support for Weather codes

To use these icons with a weather API like Yahoo you need to call them by a weather code.
https://developer.yahoo.com/weather/#codes

It would be great to have this as part of the less.

Icon request: Clear (sunny) with wind

At the moment, I'm using the "wi-day-cloudy-windy" to indicate this but this can understandably be mis-interpreted as "(partly) cloudy with wind". The absence of this icon became apparent when I'd go out when the skies were completely clear but there was wind.

Hope you can find the time to implement this icon.

Thanks for the otherwise excellent font.

Bardi

Icon request: wi-night-alt-cloudy

As of now there's only a full moon (wi-night-cloudy), which can get kinda confused with a "partly cloudy" icon.

Can't spin icons using css

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

Bower version 1.2.0 not available?

Firstly, thanks for these icons, they're great.

Currently the only available version of weather-icons on bower is 0.0.1. I can see that the bower.json has the latest version specified, 1.2. I think it's likely a result of the git tag missing, which is what bower depends upon for versioning.

$ 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

Inconsistencies with Fonts Displaying in Chrome

I have implemented Awesome Weather Pro and found that Safari and IE display beautiful icons. Yet Chrome does not. It appears that some ISPs, mine in particular, are not passing .woff files through to the browser. Research seems to indicate two forms of action: (modify the IIS servers) or change the order in which .css references .tiff, .svg, and .woff fonts when they are called in the browser. Threads on the web indicate that .svg, if called first will work with Chrome.

I cannot find any real support threads on what the proper fix for this should be. ISPs will not take kindly to altering their servers so I am hoping that there is a coding solution that can be implemented by plugin developers that solves this issue. Fonts are great but until .woff issues are stabilized, plugins like Awesome Weather Pro fall short of expectations for Chrome users.

Rename font folder to 'fonts'

To follow the pattern set by Twitter Bootstrap, the 'font' folder should be renamed to 'fonts'.

It would help those of us that are just dropping in the minified CSS Bootstrap code and then putting in your excellent icons.

v1.2 icons not in cheatsheet

i am using the cheatsheet to copy paste relevant icons in a py script which is called by conky.But i can't see any moonPhase icons in the cheatsheet. I can't copy paste icons from main Page. Could you add them to the cheatsheet.
Much thanks

Celsius vs Celcius

Justed checked out the latest weather-icons and found some strange name problems:

The Docs say to use 'wi-celsius' but in the less file it compiles from
@celcius: "\f03c"; // celsius .wi-celcius:before { content: @celcius ; } // celsius

this should be changed to 'celsius'

add inverse icons for moon

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.

Icon to represent fallen rain

I'm using this font to show how my weatherstation is doing and I'm missing an icon to represent the rain which has fallen in a certain period. Could you please add such an icon?

Thank you and keep up the good work, this font is awesome!

Wind Direction

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.

CDNJS automatic pull request version issue

CDNjs - No more manual pull request #3638
cdnjs/cdnjs#3638

weather-icons is now pull into CDNjs automatically. This created a small version number issue, but is not a big deal. when weather-icons brins in version 1.4 this might correct.

The automatic pull just guarantees that more users get faster access to earlier versions via a free cdn.
https://github.com/cdnjs/cdnjs

Fixed width class

Much like the fa-fw class used by FontAwsome. This would make tabular data look nicer.

Mark release 1.2

Would you mind marking version 1.2 under releases?

how use it

hi,
I put the folder fonts/ next to the folder css, then the css in the folder css/

I have a rectangle, but not the font ?

Thank you

EDIT: I fixed

Anyone have the "wi-strong-wind" in a OTF / TTF file?

I need to use this icon in photoshop but its not part of the OTF / TTF files in this repository.

Add more icons (based on NOAA)

I have recently been using the NOAA API to pull weather information to my website. I integrated these icons to replace the corny old images they have. Honestly, you will see how outdated they are.

Some however, I noticed did not have matching icons. Of course, I was able to match up the "Fair" with wi-day-sunny, but if you look at the list, there is no "Smoke," "Dust," or anything "In the Vicinity." From what NOAA I have seen in my site, NOAA uses all of the images appropriately. I only looked at the Daytime images and their matches.Also notice a Zip download at the top. I have not tried it, but it will make downloading them easier if you need to.

The NOAA Image Database (quite short really): http://w1.weather.gov/xml/current_obs/weather.php
The Daytime icons are on the left and the nighttime ones are on the right. If the icon is only on the left, then there is no day/night specification.

Don't worry about matching the URLs to the icons. All I'm trying to do here is suggest more icons to add.

Thanks for all of your hard work.

Request: N/A icon

First, I want to say thanks for making this.

I would like to request an icon reading "N/A" for when weather data is not available. Also wi-snow-thunderstorm please.

bower install weather-icons will install v0.0.1

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

Add Beafort Scale Icons

Would be neat to have all the wind-speeds represented as well:

Beaufort Scale 0 - 12:
'Calm',
'Light Air',
'Light Breeze',
'Gentle Breeze',
'Moderate Breeze',
'Fresh Breeze',
'Strong Breeze',
'Moderate Gale',
'Gale',
'Storm',
'Whole Gale',
'Storm',
'Hurricane',

Thanks for a great font! :)

Missing Icons

Hi,
I have noticed that there are no icons for:-
wi-up-left and wi-down-right

Any chance these could be added

Thanks :)

Missing period on classnames deg when using bower

I don't know why this is, but when i install using bower it seems like i get an older version, where the period is missing on the class names, where you are setting the degrees for the wind.

12 hours clocks

inspired on the font awesome clock, but twelve variations.

Icon suggestions

Am loving your icons ... some suggestions for additional ones:

• single cloud (like wi-cloud but without the open bottom)
• mist (to differentiate from fog)
• wi-night-alt-cloudy
• sleet (without the storm)
• haze

Additional icons

Wondering if it possible to add following icons:

• Sleet
• Snow and Thunder
• Sleet showers and thunder
• Snow showers and thunder
• Rain and thunder
• Sleet and thunder

I am using YR WeatherService (www.yr.no), and they have a few other icons (but they are only bitmap images). Take a look at their icons here: http://om.yr.no/forklaring/symbol/

Moon Phases backwards with default black font with white background

I feel the moon phases are essentially backwards when using black font on a white background (common scenario). The "New Moon" shows as an empty circle with a black outline which I feel should be a "Full Moon". A Full moon shows as a filled black circle - which again w/ default settings looks more like a New Moon.

I understand the logic behind how it's working (full moon being filled in).

To get a close "fix" - I've had to reference the opposite of what the icon actually is. http://screencast.com/t/pgqoO0kZXAc Maybe the moon icons themselves could be a full circle (waning/waxing) so even with it being as is - if I have black font on white - That way in my example the "First Quarter" would be a full circle - filled in on the left - and the right side being white.

Typo "wi-celcius"

There is a typo "celcius" - it should be a "celsius" ;-)
(wi-celcius => wi-celsius)

https://en.wikipedia.org/wiki/Celsius
https://en.wikipedia.org/wiki/Anders_Celsius

Request: Icon for air pressure (barometer)

Maybe something like a gauge?

Thanks a lot!
Rob

The cheatsheet page is missing.

Linked from http://erikflowers.github.io/weather-icons/, the cheatsheet page is missing.

How to contribute?

sorry for this dumb question, but if i want to add an icon, and github doesent offer me the way to modify the main file because it is not text, how do I do ?

I added some icons (two from DejaVu) and separated some icons so I can animate them separately:
https://github.com/abdelouahabb/weather-fonts/blob/master/codes.png

Icons doesn't fit their bounds

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!

2 new Icons: moonrise and moonset

Hi,
i need 2 new icons for moonrise and moonset.

Such as...
https://cdn1.iconfinder.com/data/icons/hawcons/32/700455-icon-41-moonrise-256.png
https://cdn1.iconfinder.com/data/icons/hawcons/32/700456-icon-42-moonset-256.png

Can you help me?

Thank you and goodbye

Wind directions icons

Wind direction icons not heading toward advertised directions, wi-wind-north is pointing south. As to my knowledge there is a consistent 180 deg shift (not fully tested yet).

BUG: The wind icons doesn't work

Hi!

The wind direction icons doesn't work at all. None of the wi-wind-default._{number}-deg work but all the other icons works.

Bower support

Could you add Bower support to weather-icons? It would make installing/using it quite a bit simpler.

Forecast.io compatibilty

FYI. You'd only need to add/alias 5 class names to have full compatibilty with the icon names used in the Forecast.io API.

wi-clear-day 
wi-clear-night 
wi-wind
wi-partly-cloudy-day
wi-partly-cloudy-night

via this page: https://developer.forecast.io/docs/v2

icon: A machine-readable text summary of this data point, suitable for selecting an icon for display. If defined, this property will have one of the following values: clear-day, clear-night, rain, snow, sleet, wind, fog, cloudy, partly-cloudy-day, or partly-cloudy-night.

.ttf file

Hi there! Wonderful icon set you've created. Am I wrong in assuming that the .ttf file should have the icons in it? When I installed it on my machine it looks like a regular font with A-Z. I'm creating an application in WPF/C# and was hoping to use these there.

Cheers

Misleading wind direction icons (are in opposition)

Wind directions are reported by the direction from which it originates, so the arrow on the icons should be turned around.
Actual state is misleading.

https://en.wikipedia.org/wiki/Wind_direction

Stackable icons

It would be fantastic if the icons were stackable, for example on wi-day-sunny-overcast it would be great to color the sun yellow and the clouds gray. This would be possible if the icon was a composite of two icons.

Mislabelled icon

A quick heads up that the icon for wi-night-partly-cloudy on http://erikflowers.github.io/weather-icons/ is missing the wi- prefix

Icon Recommendations

The system I am using is missing some icons that may or may not be a good idea to add.

Tsunami
Earthquake
Fire (Smoke is close)
Volcano

Mostly natural disasters, but since hurricane and tornado are in there figured I would throw it out as a suggestion.

Moon icons are slightly inaccurate

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.

Additional Icons for v1.1

Here is what I've got slated to come up with illustrations for and add to the font:

Smoke
Dust
Haze
Freezing rain
Sleet
Sleet and thunder
Snow and thunder
Windy snow
Hot
Hurricane
Eclipse
Unknown
Starry sky
meteor
Icy
Sunrise/sunset
Dangerous smog
Aliens