222 Weather Themed Icons and CSSWeather 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 http://weathericons.io!
Basic UsagePlace the 5 font files and the main
weather-icons.min.cssfile in your project, with the assumption that the fonts are located up
../from your CSS directory.
The icons are displayed by using an
ielement and adding the base class
wiand 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 http://weathericons.io.
API UsageThis 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 UsageTo use the wind indicators, you must also use
weather-icons-wind.min.cssalong with the default CSS file. To display a wind indicator, you must use the base class
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).