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-07 13:54:35 -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 >
< 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 >
< p class = "headline" > Icon font and CSS for 219 weather themed icons, ready to be dropped right into < a href = "http://getbootstrap.com" > Bootstrap,< / a > or any project! < i class = "wi wi-cloudy" > < / i > < / p >
< p > Infinitley scalable, any CSS that can be applied to text can be applied to the icons. All you need to do to insert an icon is add the class to an "i" element:< code > < i class="wi wi-day-lightning"> < /i> < / code > < / p >
< 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" >
< 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< / div >
< div class = "icon_unicode" > f00d < / 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-07 13:54:35 -07:00
< div class = "section-title" > Neutral and Cloudy< / 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 >
< p > There are 360 classes for each in 1 degree increments for maximum precision. < / p >
< p > < / p >
< / 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 >
< p > There are 16 classes each for precision when using cardinal directions. < / p >
< p > < / p >
< / 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-07 13:54:35 -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 >
