Mirrors
/
erikflowers_weather-icons
mirror of https://github.com/erikflowers/weather-icons.git
2
0
Fork 0
Code Issues Releases Wiki Activity
215 Weather Themed Icons and CSS http://weathericons.io
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 Commits
4 Branches
22 Tags
73 MiB
CSS 59.8%
HTML 11.6%
Less 10.9%
SCSS 10.6%
Pug 7.1%
 
 
 
 
 
master
gh-pages
2.1.0-wip
2.0-wip
v2.0.0
v1.3.2
v1.3.1
v1.3.0
v1.2.1
v1.2.0
v0.0.1
2.0.9
2.0.8
2.0.7
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.12
2.0.11
2.0.10
2.0.1
1.2
1.1ghpagesendpoint
1.1endpoint
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f7f6810f3e'
${ noResults }
Go to file
Erik Flowers f7f6810f3e - updating index page with more instructions 
- fixing EDN files to put semicolon after all sass variable files
- updating font files all over
- updating to 222 icons
 		9 years ago
_builder - updating index page with more instructions 9 years ago
_docs - updating index page with more instructions 9 years ago
css - updating index page with more instructions 9 years ago
font - updating index page with more instructions 9 years ago
less - updating index page with more instructions 9 years ago
sass - updating index page with more instructions 9 years ago
.gitignore sass conversion step 1 9 years ago
README.md Update README.md 9 years ago
bower.json Had not added wind to the list 9 years ago

README.md

Weather Icons

Version 2.0 - August 2015

215 Weather Themed Icons and CSS

Weather Icons is the only icon font and CSS with 215 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!

Icon Preview

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 with. See it all at http://weathericons.io.

Wind Usage

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.

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

Contact

Weather Icons is maintained by Erik Flowers. Reach me at @Erik_UX or at http://www.helloerik.com.