Weather Icons is the only icon font and CSS with 215 weather themed icons, ready to be dropped right intoBootstrap, or any project that needs high quality weather, maritime, and meteorological based icons!
Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more!
Weather Icons come with OTF and TTF files, so using the cheatsheet to copy and paste right into your favorite design apps like Photoshop, Illustrator, Sketch!
Easily modify the icon look with built-in classes that make it easy.
Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization.View the list of API mappings here.
Included are 28 moon phases, 12 hours of clock, the Beaufort wind force scale, maritime wind warnings,
Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.
The classes for the wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the degree, zero at the top. From points directly away from the degree. This means, if you want the indicator to represent "wind is coming from the south", you can use the towards-0-deg
class, or if you prefer to use from, then you would use from-180-deg
.
There are 360 classes for each in 1 degree increments for maximum precision.
The classes for the cardinal wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the direction in the class, north at the top. From points directly away from the direction in the class. This means, if you want the indicator to represent "wind is coming from the south", you can use the towards-n
class, or if you prefer to use from, then you would use from-s
.
The purpose of this is to accommodate applications that prefer to point to where the wind is originating from (arrow points against the wind), or pointing where the wind is blowing (arrow points in direction of wind). You can decide which fits your application best and use the class that matches.
There are 16 classes each for precision when using cardinal directions.
Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.
wi-flip-horizontal
wi-flip-vertical
wi-rotate-90
wi-rotate-180
wi-rotate-270
wi-fw