2015-07-31 17:04:10 -07:00
<!DOCTYPE html>
< html >
< head >
2015-08-01 17:53:44 -07:00
< title > Weather Icons - 219 font icons inspired by Font Awesome and designed for Bootstrap< / title >
2015-08-06 19:12:56 -07:00
<!-- favicons -->
< link rel = "apple-touch-icon" sizes = "57x57" href = "/apple-touch-icon-57x57.png" >
< link rel = "apple-touch-icon" sizes = "60x60" href = "/apple-touch-icon-60x60.png" >
< link rel = "icon" type = "image/png" href = "/favicon-16x16.png" sizes = "16x16" >
< link rel = "icon" type = "image/png" href = "/favicon-32x32.png" sizes = "32x32" >
< meta name = "msapplication-TileColor" content = "#da532c" >
<!-- favicons -->
2015-07-31 17:04:10 -07:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
< link rel = "stylesheet" href = "css/styles.css" >
2015-08-01 17:53:44 -07:00
< link rel = "stylesheet" href = "../css/weather-icons.css" >
< link rel = "stylesheet" href = "../css/weather-icons-wind.css" >
2015-08-06 19:12:56 -07:00
< script src = "//use.typekit.net/hse2lqc.js" > < / script >
< script > try { Typekit . load ( ) ; } catch ( e ) { } script ( src = 'js/bootstrap.min.js' ) < / script >
< script >
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-547519-12', 'erikflowers.github.io');
ga('send', 'pageview');
< / script >
2015-07-31 17:04:10 -07:00
< / head >
< body >
2015-08-06 19:12:56 -07:00
< header >
< div class = "container" >
< div class = "row-fluid" >
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >
< div class = "icon-box" >
< div class = "wi wi-day-cloudy" > < / div >
< / div >
< / div >
2015-08-06 19:12:56 -07:00
< h1 > Weather Icons< / h1 >
2015-08-08 13:54:22 -07:00
< h2 > 215 Weather Themed Icons and CSS< / h2 > < a href = "#" class = "download-now" > Download Now< i class = "wi wi-sunset" > < / i > < / a >
2015-08-06 19:12:56 -07:00
< / div >
< / div >
< / div >
< / header >
2015-08-08 13:54:22 -07:00
< section class = "social" >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-12" > < / div >
< / div >
< / div >
< / section >
2015-08-06 19:12:56 -07:00
< section class = "content container intro" >
< div class = "row" >
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "intro-icons" > < i class = "wi wi-day-lightning" > < / i > < i class = "wi wi-night-thunderstorm" > < / i > < i class = "wi wi-day-snow" > < / i > < i class = "wi wi-sprinkle" > < / i > < i class = "wi wi-day-sunny" > < / i > < i class = "wi wi-cloudy" > < / i > < i class = "wi wi-night-rain-mix" > < / i > < i class = "wi wi-sunset" > < / i > < i class = "wi wi-sunrise" > < / i > < i class = "wi wi-day-cloudy-windy" > < / i > < i class = "wi wi-night-rain" > < / i > < i class = "wi wi-night-alt-snow" > < / i > < / div >
2015-08-08 13:54:22 -07:00
< p class = "headline" > Weather Icons is the only icon font and CSS with 219 weather themed icons, ready to be dropped right into < a href = "http://getbootstrap.com" > Bootstrap,< / a > or any project that needs high quality weather, maritime, and meteorological based icons!< / p >
< div class = "features" >
< div class = "row" >
< div class = "col-sm-4" >
< h3 > < i class = "wi wi-day-sunny" > < / i > The Freedom of CSS< / h3 >
< p > Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! < i class = "wi wi-night-thunderstorm wi-flip-vertical purple" > < / i > < i class = "wi wi-night-thunderstorm wi-flip-horizontal purple" > < / i > < i class = "wi wi-night-thunderstorm wi-rotate-90 purple" > < / i > < i class = "wi wi-night-thunderstorm wi-rotate-180 purple" > < / i > < i class = "wi wi-night-thunderstorm wi-rotate-270 purple" > < / i > < / p >
< / div >
< div class = "col-sm-4" >
< h3 > < i class = "wi wi-lightning" > < / i > Use In Graphic Apps< / h3 >
< p > 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!< / p >
< / div >
< div class = "col-sm-4" >
< h3 > < i class = "wi wi-night-rain" > < / i > Flip, Scale, Transform< / h3 >
< p > Easily modify the icon look with built-in classes that make it easy.< / p >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-4" >
< h3 > < i class = "wi wi-earthquake" > < / i > Built-in Popular Weather API Alias Classes< / h3 >
< p > Using popular API such as Yahoo Weather, OpenWeatherMaps, Forecast.io, or World Meteorological Organization? There are built-in class aliases that you can use right away.< / p >
< / div >
< div class = "col-sm-4" >
< h3 > < i class = "wi wi-thunderstorm" > < / i > Specialty Icons< / h3 >
< p > Included are 28 moon phases, 12 hours of clock, the Beaufort wind force scale, maritime wind warnings,< / p >
< / div >
< div class = "col-sm-4" >
< h3 > < i class = "wi wi-wind-default from-270-deg" > < / i > 360 Degrees of Wind Direction< / h3 >
< p > Get wind direction down to 1 degree increments for maximum precision in your UI.< / p >
< / div >
< / div >
< / div >
< p > Please make requests or report any issues to the < a href = "https://github.com/erikflowers/weather-icons/issues" > main repository on GitHub.< / a > < / p >
< div class = "meta" > < a href = "http://github.com/erikflowers/weather-icons" > View the project on GitHub< i class = "fa fa-github" > < / i > < / a > < / div >
2015-08-06 19:12:56 -07:00
< / div >
< / div >
< / section >
2015-07-31 21:11:08 -07:00
< div class = "container" >
< div class = "row" >
2015-08-01 11:34:12 -07:00
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Daytime< / div >
2015-08-01 11:34:12 -07:00
< div class = "row" >
2015-08-08 13:54:22 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-sunny< / div >
< div class = "icon_unicode" > f00d < / div >
< / div >
2015-08-01 11:34:12 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-cloudy< / div >
< div class = "icon_unicode" > f002 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-cloudy-gusts< / div >
< div class = "icon_unicode" > f000 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-cloudy-windy< / div >
< div class = "icon_unicode" > f001 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-fog< / div >
< div class = "icon_unicode" > f003 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-hail< / div >
< div class = "icon_unicode" > f004 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-haze< / div >
< div class = "icon_unicode" > f0b6 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-lightning< / div >
< div class = "icon_unicode" > f005 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-rain< / div >
< div class = "icon_unicode" > f008 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-rain-mix< / div >
< div class = "icon_unicode" > f006 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-rain-wind< / div >
< div class = "icon_unicode" > f007 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-showers< / div >
< div class = "icon_unicode" > f009 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-sleet< / div >
< div class = "icon_unicode" > f0b2 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-sleet-storm< / div >
< div class = "icon_unicode" > f068 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-snow< / div >
< div class = "icon_unicode" > f00a < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-snow-thunderstorm< / div >
< div class = "icon_unicode" > f06b < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-snow-wind< / div >
< div class = "icon_unicode" > f065 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-sprinkle< / div >
< div class = "icon_unicode" > f00b < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-storm-showers< / div >
< div class = "icon_unicode" > f00e < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-sunny-overcast< / div >
< div class = "icon_unicode" > f00c < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-thunderstorm< / div >
< div class = "icon_unicode" > f010 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-windy< / div >
< div class = "icon_unicode" > f085 < / div >
< / div >
2015-08-01 17:53:44 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-solar-eclipse< / div >
< div class = "icon_unicode" > f06e < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-hot< / div >
< div class = "icon_unicode" > f072 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-cloudy-high< / div >
< div class = "icon_unicode" > f07d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-day-light-wind< / div >
< div class = "icon_unicode" > f0c4 < / div >
< / div >
2015-08-01 11:34:12 -07:00
< / div >
< / div >
2015-07-31 21:11:08 -07:00
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Nighttime< / div >
2015-07-31 21:11:08 -07:00
< div class = "row" >
2015-08-07 13:54:35 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-clear< / div >
< div class = "icon_unicode" > f02e < / div >
< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-cloudy< / div >
< div class = "icon_unicode" > f086 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-cloudy-gusts< / div >
< div class = "icon_unicode" > f022 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-cloudy-windy< / div >
< div class = "icon_unicode" > f023 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-hail< / div >
< div class = "icon_unicode" > f024 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-lightning< / div >
< div class = "icon_unicode" > f025 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-rain< / div >
< div class = "icon_unicode" > f028 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-rain-mix< / div >
< div class = "icon_unicode" > f026 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-rain-wind< / div >
< div class = "icon_unicode" > f027 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-showers< / div >
< div class = "icon_unicode" > f029 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-sleet< / div >
< div class = "icon_unicode" > f0b4 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-sleet-storm< / div >
< div class = "icon_unicode" > f06a < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-snow< / div >
< div class = "icon_unicode" > f02a < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-snow-thunderstorm< / div >
< div class = "icon_unicode" > f06d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-snow-wind< / div >
< div class = "icon_unicode" > f067 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-sprinkle< / div >
< div class = "icon_unicode" > f02b < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-storm-showers< / div >
< div class = "icon_unicode" > f02c < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-thunderstorm< / div >
< div class = "icon_unicode" > f02d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-cloudy< / div >
< div class = "icon_unicode" > f031 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-cloudy-gusts< / div >
< div class = "icon_unicode" > f02f < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-cloudy-windy< / div >
< div class = "icon_unicode" > f030 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-fog< / div >
< div class = "icon_unicode" > f04a < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-hail< / div >
< div class = "icon_unicode" > f032 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-lightning< / div >
< div class = "icon_unicode" > f033 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-partly-cloudy< / div >
< div class = "icon_unicode" > f083 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-rain< / div >
< div class = "icon_unicode" > f036 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-rain-mix< / div >
< div class = "icon_unicode" > f034 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-rain-wind< / div >
< div class = "icon_unicode" > f035 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-showers< / div >
< div class = "icon_unicode" > f037 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-sleet< / div >
< div class = "icon_unicode" > f0b3 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-sleet-storm< / div >
< div class = "icon_unicode" > f069 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-snow< / div >
< div class = "icon_unicode" > f038 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-snow-thunderstorm< / div >
< div class = "icon_unicode" > f06c < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-snow-wind< / div >
< div class = "icon_unicode" > f066 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-sprinkle< / div >
< div class = "icon_unicode" > f039 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-storm-showers< / div >
< div class = "icon_unicode" > f03a < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-thunderstorm< / div >
< div class = "icon_unicode" > f03b < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-lunar-eclipse< / div >
< div class = "icon_unicode" > f070 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-stars< / div >
< div class = "icon_unicode" > f077 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-storm-showers< / div >
< div class = "icon_unicode" > f01d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-thunderstorm< / div >
< div class = "icon_unicode" > f01e < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-cloudy-high< / div >
< div class = "icon_unicode" > f07e < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-cloudy-high< / div >
< div class = "icon_unicode" > f080 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-night-alt-partly-cloudy< / div >
< div class = "icon_unicode" > f081 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< / div >
< / div >
< div class = "col-sm-12" >
2015-08-08 13:54:22 -07:00
< div class = "section-title" > Neutral< / div >
2015-07-31 21:11:08 -07:00
< div class = "row" >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-cloud< / div >
< div class = "icon_unicode" > f041 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-cloudy< / div >
< div class = "icon_unicode" > f013 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-cloudy-gusts< / div >
< div class = "icon_unicode" > f011 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-cloudy-windy< / div >
< div class = "icon_unicode" > f012 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-fog< / div >
< div class = "icon_unicode" > f014 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-hail< / div >
< div class = "icon_unicode" > f015 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-rain< / div >
< div class = "icon_unicode" > f019 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-rain-mix< / div >
< div class = "icon_unicode" > f017 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-rain-wind< / div >
< div class = "icon_unicode" > f018 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-showers< / div >
< div class = "icon_unicode" > f01a < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-sleet< / div >
< div class = "icon_unicode" > f0b5 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-01 17:53:44 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-snow< / div >
< div class = "icon_unicode" > f01b < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-sprinkle< / div >
< div class = "icon_unicode" > f01c < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-storm-showers< / div >
< div class = "icon_unicode" > f01d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-thunderstorm< / div >
< div class = "icon_unicode" > f01e < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-snow-wind< / div >
< div class = "icon_unicode" > f064 < / div >
< / div >
< div class = "icon-wrap" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-snow< / div >
< div class = "icon_unicode" > f01b < / div >
2015-08-01 17:53:44 -07:00
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-smog< / div >
< div class = "icon_unicode" > f074 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-smoke< / div >
< div class = "icon_unicode" > f062 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-lightning< / div >
< div class = "icon_unicode" > f016 < / div >
< / div >
2015-08-07 13:54:35 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-raindrops< / div >
< div class = "icon_unicode" > f04e < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-raindrop< / div >
< div class = "icon_unicode" > f078 < / div >
< / div >
2015-08-01 17:53:44 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-dust< / div >
< div class = "icon_unicode" > f063 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-snowflake-cold< / div >
< div class = "icon_unicode" > f076 < / div >
< / div >
< div class = "icon-wrap" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-windy< / div >
< div class = "icon_unicode" > f021 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-strong-wind< / div >
< div class = "icon_unicode" > f050 < / div >
2015-08-01 17:53:44 -07:00
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-sandstorm< / div >
< div class = "icon_unicode" > f082 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-earthquake< / div >
< div class = "icon_unicode" > f0c6 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-fire< / div >
< div class = "icon_unicode" > f0c7 < / div >
2015-08-01 19:13:46 -07:00
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-flood< / div >
< div class = "icon_unicode" > f07c < / div >
< / div >
2015-08-07 13:54:35 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-meteor< / div >
< div class = "icon_unicode" > f071 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-tsunami< / div >
< div class = "icon_unicode" > f0c5 < / div >
< / div >
< div class = "icon-wrap" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-volcano< / div >
< div class = "icon_unicode" > f0c8 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-hurricane< / div >
< div class = "icon_unicode" > f073 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-tornado< / div >
< div class = "icon_unicode" > f056 < / div >
2015-08-01 19:13:46 -07:00
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-small-craft-advisory< / div >
< div class = "icon_unicode" > f0cc < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-gale-warning< / div >
< div class = "icon_unicode" > f0cd < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-storm-warning< / div >
< div class = "icon_unicode" > f0ce < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-hurricane-warning< / div >
< div class = "icon_unicode" > f0cf < / div >
< / div >
2015-08-01 17:53:44 -07:00
< / div >
< / div >
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Miscellaneous< / div >
2015-08-01 17:53:44 -07:00
< div class = "row" >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-alien< / div >
< div class = "icon_unicode" > f075 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-celsius< / div >
< div class = "icon_unicode" > f03c < / div >
< / div >
2015-08-07 13:54:35 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-fahrenheit< / div >
< div class = "icon_unicode" > f045 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-degrees< / div >
< div class = "icon_unicode" > f042 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-thermometer< / div >
< div class = "icon_unicode" > f055 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-thermometer-exterior< / div >
< div class = "icon_unicode" > f053 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-thermometer-internal< / div >
< div class = "icon_unicode" > f054 < / div >
< / div >
2015-08-01 17:53:44 -07:00
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-cloud-down< / div >
< div class = "icon_unicode" > f03d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-cloud-up< / div >
< div class = "icon_unicode" > f040 < / div >
< / div >
< div class = "icon-wrap" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-cloud-refresh< / div >
< div class = "icon_unicode" > f03e < / div >
2015-08-01 17:53:44 -07:00
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-horizon< / div >
< div class = "icon_unicode" > f047 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-horizon-alt< / div >
< div class = "icon_unicode" > f046 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-sunrise< / div >
< div class = "icon_unicode" > f051 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-sunset< / div >
< div class = "icon_unicode" > f052 < / div >
< / div >
< div class = "icon-wrap" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moonrise< / div >
< div class = "icon_unicode" > f0c9 < / div >
2015-08-01 17:53:44 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-mooonset< / div >
< div class = "icon_unicode" > f0ca < / div >
2015-08-01 17:53:44 -07:00
< / div >
< div class = "icon-wrap" >
2015-08-07 13:54:35 -07:00
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-refresh< / div >
< div class = "icon_unicode" > f04c < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-refresh-alt< / div >
< div class = "icon_unicode" > f04b < / div >
2015-08-01 17:53:44 -07:00
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-umbrella< / div >
< div class = "icon_unicode" > f084 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-barometer< / div >
< div class = "icon_unicode" > f079 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-humidity< / div >
< div class = "icon_unicode" > f07a < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-na< / div >
< div class = "icon_unicode" > f07b < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-train< / div >
< div class = "icon_unicode" > f0cb < / div >
2015-07-31 21:11:08 -07:00
< / div >
< / div >
< / div >
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Moon Phases< / div >
2015-07-31 21:11:08 -07:00
< div class = "row" >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-new< / div >
< div class = "icon_unicode" > f095 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-cresent-1< / div >
< div class = "icon_unicode" > f096 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-cresent-2< / div >
< div class = "icon_unicode" > f097 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-cresent-3< / div >
< div class = "icon_unicode" > f098 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-cresent-4< / div >
< div class = "icon_unicode" > f099 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-cresent-5< / div >
< div class = "icon_unicode" > f09a < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-cresent-6< / div >
< div class = "icon_unicode" > f09b < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-gibbous-1< / div >
< div class = "icon_unicode" > f09d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-gibbous-2< / div >
< div class = "icon_unicode" > f09e < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-gibbous-3< / div >
< div class = "icon_unicode" > f09f < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-gibbous-4< / div >
< div class = "icon_unicode" > f0a0 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-gibbous-5< / div >
< div class = "icon_unicode" > f0a1 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waxing-gibbous-6< / div >
< div class = "icon_unicode" > f0a2 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-full< / div >
< div class = "icon_unicode" > f0a3 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-gibbous-1< / div >
< div class = "icon_unicode" > f0a4 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-gibbous-2< / div >
< div class = "icon_unicode" > f0a5 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-gibbous-3< / div >
< div class = "icon_unicode" > f0a6 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-gibbous-4< / div >
< div class = "icon_unicode" > f0a7 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-gibbous-5< / div >
< div class = "icon_unicode" > f0a8 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-gibbous-6< / div >
< div class = "icon_unicode" > f0a9 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-crescent-1< / div >
< div class = "icon_unicode" > f0ab < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-crescent-2< / div >
< div class = "icon_unicode" > f0ac < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-crescent-3< / div >
< div class = "icon_unicode" > f0ad < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-crescent-4< / div >
< div class = "icon_unicode" > f0ae < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-crescent-5< / div >
< div class = "icon_unicode" > f0af < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-moon-waning-crescent-6< / div >
< div class = "icon_unicode" > f0b0 < / div >
< / div >
< / div >
< / div >
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Time< / div >
2015-08-01 17:53:44 -07:00
< div class = "row" >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-1< / div >
< div class = "icon_unicode" > f08a < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-2< / div >
< div class = "icon_unicode" > f08b < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-3< / div >
< div class = "icon_unicode" > f08c < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-4< / div >
< div class = "icon_unicode" > f08d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-5< / div >
< div class = "icon_unicode" > f08e < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-6< / div >
< div class = "icon_unicode" > f08f < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-7< / div >
< div class = "icon_unicode" > f090 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-8< / div >
< div class = "icon_unicode" > f091 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-9< / div >
< div class = "icon_unicode" > f092 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-10< / div >
< div class = "icon_unicode" > f093 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-11< / div >
< div class = "icon_unicode" > f094 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-time-12< / div >
< div class = "icon_unicode" > f089 < / div >
< / div >
< / div >
< / div >
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Directional Arrows< / div >
2015-07-31 21:11:08 -07:00
< div class = "row" >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-direction-up< / div >
< div class = "icon_unicode" > f058 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-direction-up-right< / div >
< div class = "icon_unicode" > f057 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-direction-right< / div >
< div class = "icon_unicode" > f04d < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-direction-down-right< / div >
< div class = "icon_unicode" > f088 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-direction-down< / div >
< div class = "icon_unicode" > f044 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-direction-down-left< / div >
< div class = "icon_unicode" > f043 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-direction-left< / div >
< div class = "icon_unicode" > f048 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-direction-up-left< / div >
< div class = "icon_unicode" > f087 < / div >
< / div >
< / div >
< / div >
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Wind Degree Examples< / div >
< div class = "instructions" >
< p > 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 < code > towards-0-deg< / code > class, or if you prefer to use from, then you would use < code > from-180-deg< / code > .< / p >
2015-08-08 13:54:22 -07:00
< p > There are 360 classes for each in 1 degree increments for maximum precision.< / p >
< p > < / p >
2015-08-07 13:54:35 -07:00
< / div >
2015-07-31 21:11:08 -07:00
< div class = "row" >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-0-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-0-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-23-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-23-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-45-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-45-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-68-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-68-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-90-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-90-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-113-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-113-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-135-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-135-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-158-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-158-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-180-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-180-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-203-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-203-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-225-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-225-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-248-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-248-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-270-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-270-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-293-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-293-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-313-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-313-deg< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default towards-336-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.towards-336-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-180-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-180-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-203-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-203-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-225-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-225-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-248-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-248-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-270-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-270-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-293-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-293-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-313-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-313-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-336-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-336-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-0-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-0-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-23-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-23-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-45-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-45-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-68-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-68-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-90-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-90-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-113-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-113-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-135-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-135-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
< / div >
2015-08-01 19:13:46 -07:00
< div class = "icon-wrap" > < i class = "wi wi-wind-default from-158-deg" > < / i >
2015-08-01 11:34:12 -07:00
< div class = "icon-name" > wi-wind-default.from-158-deg< / div >
2015-07-31 21:11:08 -07:00
< div class = "icon_unicode" > f0b1 < / div >
2015-08-01 19:13:46 -07:00
< / div >
< / div >
< / div >
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Wind Cardinal Examples< / div >
< div class = "instructions" >
< p > 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 < code > towards-n< / code > class, or if you prefer to use from, then you would use < code > from-s< / code > .< / p >
< p > 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.< / p >
2015-08-08 13:54:22 -07:00
< p > There are 16 classes each for precision when using cardinal directions.< / p >
< p > < / p >
2015-08-07 13:54:35 -07:00
< / div >
2015-08-01 19:13:46 -07:00
< div class = "row" >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-n" > < / i >
< div class = "icon-name" > wi-towards-n< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-nne" > < / i >
< div class = "icon-name" > wi-towards-nne< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-ne" > < / i >
< div class = "icon-name" > wi-towards-ne< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-ene" > < / i >
< div class = "icon-name" > wi-towards-ene< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-e" > < / i >
< div class = "icon-name" > wi-towards-e< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-ese" > < / i >
< div class = "icon-name" > wi-towards-ese< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-se" > < / i >
< div class = "icon-name" > wi-towards-se< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-sse" > < / i >
< div class = "icon-name" > wi-towards-sse< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-s" > < / i >
< div class = "icon-name" > wi-towards-s< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-ssw" > < / i >
< div class = "icon-name" > wi-towards-ssw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-sw" > < / i >
< div class = "icon-name" > wi-towards-sw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-wsw" > < / i >
< div class = "icon-name" > wi-towards-wsw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-w" > < / i >
< div class = "icon-name" > wi-towards-w< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-wnw" > < / i >
< div class = "icon-name" > wi-towards-wnw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-nw" > < / i >
< div class = "icon-name" > wi-towards-nw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-towards-nnw" > < / i >
< div class = "icon-name" > wi-towards-nnw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-n" > < / i >
< div class = "icon-name" > wi-from-n< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-nne" > < / i >
< div class = "icon-name" > wi-from-nne< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-ne" > < / i >
< div class = "icon-name" > wi-from-ne< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-ene" > < / i >
< div class = "icon-name" > wi-from-ene< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-e" > < / i >
< div class = "icon-name" > wi-from-e< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-ese" > < / i >
< div class = "icon-name" > wi-from-ese< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-se" > < / i >
< div class = "icon-name" > wi-from-se< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-sse" > < / i >
< div class = "icon-name" > wi-from-sse< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-s" > < / i >
< div class = "icon-name" > wi-from-s< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-ssw" > < / i >
< div class = "icon-name" > wi-from-ssw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-sw" > < / i >
< div class = "icon-name" > wi-from-sw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-wsw" > < / i >
< div class = "icon-name" > wi-from-wsw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-w" > < / i >
< div class = "icon-name" > wi-from-w< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-wnw" > < / i >
< div class = "icon-name" > wi-from-wnw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-nw" > < / i >
< div class = "icon-name" > wi-from-nw< / div >
< div class = "icon_unicode" > f0b1 < / div >
< / div >
< div class = "icon-wrap" > < i class = "wi wi-wind-default wi-wind-from-nnw" > < / i >
< div class = "icon-name" > wi-from-nnw< / div >
< div class = "icon_unicode" > f0b1 < / div >
2015-07-31 21:11:08 -07:00
< / div >
< / div >
< / div >
2015-08-01 17:53:44 -07:00
< div class = "col-sm-12" >
2015-08-07 13:54:35 -07:00
< div class = "section-title" > Beaufort Wind Scale< / div >
2015-08-01 17:53:44 -07:00
< div class = "row" >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-0< / div >
< div class = "icon_unicode" > f0b7 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-1< / div >
< div class = "icon_unicode" > f0b8 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-2< / div >
< div class = "icon_unicode" > f0b9 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-3< / div >
< div class = "icon_unicode" > f0ba < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-4< / div >
< div class = "icon_unicode" > f0bb < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-5< / div >
< div class = "icon_unicode" > f0bc < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-6< / div >
< div class = "icon_unicode" > f0bd < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-7< / div >
< div class = "icon_unicode" > f0be < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-8< / div >
< div class = "icon_unicode" > f0bf < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-9< / div >
< div class = "icon_unicode" > f0c0 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-10< / div >
< div class = "icon_unicode" > f0c1 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-11< / div >
< div class = "icon_unicode" > f0c2 < / div >
< / div >
< div class = "icon-wrap" >
< div class = "icon" >  < / div >
< div class = "icon-name" > wi-wind-beaufort-12< / div >
< div class = "icon_unicode" > f0c3 < / div >
< / div >
< / div >
< / div >
2015-07-31 21:11:08 -07:00
< / div >
< / div >
2015-08-06 19:12:56 -07:00
< footer >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-12" >
2015-08-08 13:54:22 -07:00
< p > The Weather Icons project created and maintained by< a href = "http://www.twitter.com/Erik_UX" > Erik Flowers< / a > . v1.0 artwork by< a href = "http://www.twitter.com/artill" > Lukas Bischoff< / a > . v1.1 - 2.0 artwork by< a href = "http://www.twitter.com/Erik_UX" > Erik Flowers< / a > < / p >
< p > LESS/HTML implementation inspired and heavily influenced by< a href = "http://fortawesome.github.io/Font-Awesome/" > Font Awesome.< / a > < / p >
< p > Weather Icons licensed under< a href = "http://scripts.sil.org/OFL" > SIL OFL 1.1< / a > — Code licensed under< a href = "http://opensource.org/licenses/mit-license.html" > MIT License< / a > — Documentation licensed under< a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > < / p >
2015-08-06 19:12:56 -07:00
< / div >
< / div >
2015-08-07 13:54:35 -07:00
< div class = "row" >
< div class = "col-sm-12" > < i class = "wi wi-day-lightning" > < / i > < i class = "wi wi-night-thunderstorm" > < / i > < i class = "wi wi-day-snow" > < / i > < i class = "wi wi-sprinkle" > < / i > < i class = "wi wi-day-sunny" > < / i > < i class = "wi wi-cloudy" > < / i > < i class = "wi wi-night-rain-mix" > < / i > < i class = "wi wi-sunset" > < / i > < i class = "wi wi-sunrise" > < / i > < i class = "wi wi-day-cloudy-windy" > < / i > < i class = "wi wi-night-rain" > < / i > < i class = "wi wi-night-alt-snow" > < / i > < / div >
< / div >
2015-08-06 19:12:56 -07:00
< / div >
< / footer >
2015-07-31 17:04:10 -07:00
< / body >
< / html >
