2
0
mirror of https://github.com/erikflowers/weather-icons.git synced 2025-10-12 15:32:13 -06:00

40 lines
2.6 KiB
Markdown
Raw Normal View History

2013-08-03 17:23:14 -06:00
# Weather Icons
2015-08-26 19:10:42 -07:00
*Version 2.0.5 - August 26, 2015*
2013-06-29 10:45:23 -07:00
2015-08-08 19:20:57 -07:00
## 215 Weather Themed Icons and CSS
2013-08-03 17:23:14 -06:00
Weather Icons is the only icon font and CSS with 215 weather themed icons, ready to be dropped right into [Bootstrap](http://www.getbootstrap.com), or any project that needs high quality weather, maritime, and meteorological based icons!
2013-08-03 17:23:14 -06:00
2015-08-08 19:20:57 -07:00
Get started at [http://weathericons.io](http://weathericons.io)!
2013-08-03 17:23:14 -06:00
2015-08-08 19:28:47 -07:00
![Icon Preview](http://i.imgur.com/XmZW2q3.png)
2014-11-30 16:22:27 -08:00
2015-08-08 19:28:47 -07:00
## Basic Usage
2013-08-03 17:23:14 -06:00
2015-08-08 19:28:47 -07:00
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 with. See it all at [http://weathericons.io](http://weathericons.io).
## Wind Usage
2015-08-08 19:36:13 -07:00
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.
2015-08-08 19:35:15 -07:00
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).
2015-08-08 19:28:47 -07:00
## 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!
2013-08-03 18:00:52 -06:00
2013-08-03 17:23:14 -06:00
## Credit
2014-11-30 16:22:27 -08:00
The icon designs are originally by [Lukas Bischoff](http://www.twitter.com/artill). Icon art for v1.1 forward, HTML, Less, and CSS are by [me (Erik)](http://www.helloerik.com).
2015-08-08 19:28:47 -07:00
## Licensing
2013-08-03 17:23:14 -06:00
2015-08-08 19:28:47 -07:00
* Weather Icons licensed under [SIL OFL 1.1](http://scripts.sil.org/OFL)
* Code licensed under [MIT License](http://opensource.org/licenses/mit-license.html)
* Documentation licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0)
2013-08-03 17:23:14 -06:00
## Contact
Weather Icons is maintained by Erik Flowers. Reach me at [@Erik_UX](http://www.twitter.com/Erik_UX) or at [http://www.helloerik.com](http://www.helloerik.com).