|
1 | 1 | # Weather Icons |
2 | | -*Version 1.3 - November 30th, 2014* |
| 2 | +*Version 2.0 - August 2015* |
3 | 3 |
|
4 | | -## A free, open source icon-font of Weather icons |
| 4 | +## 215 Weather Themed Icons and CSS |
5 | 5 |
|
6 | | -Weather Icons is a font of 189 weather themed icons, ready to be dropped right into [Bootstrap](http://www.getbootstrap.com) or any other project. |
| 6 | +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! |
7 | 7 |
|
8 | | -Inspired by [Font Awesome](http://fontawesome.io/), they work in essentially the same way. They are infinitley scalable and any CSS that can be applied to text can be applied to them. All you need to do to insert an icon is add the base class and the specific icon class to an "i" element: |
| 8 | +Get started at [http://weathericons.io](http://weathericons.io)! |
9 | 9 |
|
10 | | -``<i class="wi wi-day-lightning"></i>`` |
| 10 | + |
11 | 11 |
|
12 | | -At this time, there are no other effects/mixins to do advanced icon manipulation yet. |
| 12 | +## Basic Usage |
13 | 13 |
|
14 | | - |
| 14 | +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. |
15 | 15 |
|
16 | | -####[View demo and full icon reference](http://erikflowers.github.io/weather-icons/) |
| 16 | +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>`. |
17 | 17 |
|
18 | | -## Getting Started |
19 | | -Getting started is easy. First, put the fonts in the directory ABOVE your css directory. By default, the fonts are referencing a ../fonts/ folder that is on the same level as /css. This can be changed via the `@WeatherIconPath` variable in variables.less |
| 18 | +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). |
20 | 19 |
|
21 | | -Include in your main .less file `weather-icons/weather-icons.less` and that is all you need to do. |
| 20 | +## Wind Usage |
22 | 21 |
|
23 | | -It is best to download the [repo](http://www.github.com/erikflowers/weather-icons) from Github if you want to keep up to date. Please report any issues or requests to the repository here |
| 22 | +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. |
24 | 23 |
|
25 | | -#### CSS Only Method |
26 | | -If you just want to add a css file to your project with no Less compiling, you just need to reference the `weather-icons.css` included in the css folder. *If you are not familiar with using Bootstrap, or using Bootstrap in the precompiled Less mode, I would recommend you give it a try)* |
| 24 | +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). |
27 | 25 |
|
28 | | -### Bower |
29 | | -`bower install weather-icons` |
30 | | - |
31 | | -Be sure to reference css when using the icons: |
32 | | - |
33 | | -`<link rel="stylesheet" type="text/css" href="bower_components/weather-icons/css/weather-icons.min.css">` |
34 | | - |
35 | | -## New in version 1.3 |
36 | | -Umbrella, day-windy, night-alt-cloudy, up-left, down-right, day-sleet, night-sleet, night-alt-sleet, sleet, day-haze. |
37 | | - |
38 | | -28 moon phase icons |
39 | | - |
40 | | -12 clock icons |
41 | | - |
42 | | -13 Beaufort Scale icons |
43 | | - |
44 | | -### Collaboration |
45 | | -If you feel so inclined to add icon ideas, icon art, or other fixes/changes to how the package works, feel free to help! I'd also love it if someone wanted to make this a component as well for bower, npm, component, etc. No idea how to do that myself (yet). |
| 26 | +## Contributing |
| 27 | +If you feel so inclined to add icon ideas, icon art, or other fixes/changes to how the package works, feel free to help! |
46 | 28 |
|
47 | 29 | ## Credit |
48 | 30 | 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). |
49 | 31 |
|
50 | | -None of this would be possible without [Bootstrap](http://www.getbootstrap.com), [Font Awesome](http://fontawesome.io/) and [Lukas Bischoff](http://www.twitter.com/artill). I just put it all together into a neat package. Cheatsheet provided by Michael Woywod. |
| 32 | +## Licensing |
51 | 33 |
|
52 | | -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) |
| 34 | +* Weather Icons licensed under [SIL OFL 1.1](http://scripts.sil.org/OFL) |
| 35 | +* Code licensed under [MIT License](http://opensource.org/licenses/mit-license.html) |
| 36 | +* Documentation licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0) |
53 | 37 |
|
54 | 38 | ## Contact |
55 | | -Weather Icons is maintained by me, Erik Flowers. Reach me at [@Erik_UX](http://www.twitter.com/Erik_UX) or at [http://www.helloerik.com](http://www.helloerik.com). |
| 39 | +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). |
0 commit comments