2013-06-29 21:15:46 -06:00
<!DOCTYPE html>
< html lang = "en" >
< head >
2013-08-03 14:05:39 -06:00
< title > Weather Icons - Icon Font inspired by Font Awesome and designed for Bootstrap< / title >
2013-06-29 21:15:46 -06:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
2013-08-03 14:05:39 -06:00
< script src = "//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" > < / script >
2013-06-29 21:15:46 -06:00
< script src = "//use.typekit.net/xmb4mjl.js" > < / script >
< script > try { Typekit . load ( ) ; } catch ( e ) { } script ( src = 'js/bootstrap.min.js' ) < / script >
< script src = "js/scripts.js" > < / script >
< link rel = "stylesheet" href = "css/styles.css" >
< / head >
2013-08-03 14:05:39 -06:00
< body >
2013-06-29 21:15:46 -06:00
< header >
< div class = "container" >
< div class = "row-fluid" >
< div class = "col-sm-12" >
< h1 > Weather Icons< / h1 >
2013-08-03 14:05:39 -06:00
< div class = "icon" > < i class = "wi-day-cloudy" > < / i > < / div >
2013-06-29 21:15:46 -06:00
< / div >
< / div >
< / div >
< / header >
2013-08-03 14:05:39 -06:00
< section class = "content container intro" >
2013-06-29 21:15:46 -06:00
< div class = "row" >
< div class = "col-sm-12" >
2013-08-03 14:05:39 -06:00
< p class = "intro-icons" > < i class = "wi-day-lightning" > < / i > < i class = "wi-night-thunderstorm" > < / i > < i class = "wi-day-snow" > < / i > < i class = "wi-sprinkles" > < / i > < i class = "wi-day-sunny" > < / i > < i class = "wi-cloudy" > < / i > < i class = "wi-night-rain-mix" > < / i > < i class = "wi-sunset" > < / i > < i class = "wi-sunrise" > < / i > < i class = "wi-day-cloudy-windy" > < / i > < i class = "wi-night-rain" > < / i > < i class = "wi-night-alt-snow" > < / i > < / p >
< p class = "headline" > Weather Icons is a font of 92 weather themed icons, ready to be dropped right into < a href = "http://getbootstrap.com" > Bootstrap< / a > or any other project. < i class = "wi-cloudy" > < / i > < / p >
< p > Inspired by < a href = "http://fortawesome.github.io/Font-Awesome/" > Font Awesome< / a > , they are infinitley scalable and any CSS that can be applied to text can be applied to them. All you need to do is < code > < i class="wi-day-lightning"> < / code > < / p >
< div class = "beta" >
< div class = "title" > Version Beta 1< / div >
< p > This is my first attempt at a Bootstrap/web ready icon-font, so there will be updates and improvements. It is best to download the repo from Github if you want to keep up to date. Please report any issues or requests to the < a href = "https://github.com/erikflowers/weather-icons/issues" > repository here< / a > < / p >
< p > The icon designs are originally by < a href = "https://twitter.com/artill" > Lukas Bischoff. < / a > The font has been modified slightly for icon-font usage, and turned into a HTML/CSS/LESS addon by < a href = "http://www.helloerik.com/" > me (Erik).< / a > < / p >
< / div >
< / div >
< / div >
< div class = "row download-here" >
< div class = "col-sm-4 col-offset-4" > < a href = "https://github.com/erikflowers/weather-icons" class = "download btn btn-primary btn-large" > Download Here < i class = "wi-cloud" > < / i > < / a > < / div >
< / div >
< div class = "row social" >
< div class = "col-sm-12" >
< p > < a href = "https://twitter.com/share" data-lang = "en" data-text = "Weather Icons - Bootstrap ready weather themed font icon!" data-via = "Erik_UX" data-count = "none" class = "twitter-share-button" > Tweet< / a >
< script >
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
< / script > < a href = "https://twitter.com/Erik_UX" data-show-count = "false" data-lang = "en" class = "twitter-follow-button" > Follow @Erik_UX< / a >
< script >
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
< / script > < a href = "https://twitter.com/artill" data-show-count = "false" data-lang = "en" class = "twitter-follow-button" > Follow @artill< / a >
< script >
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
< / script >
< iframe src = "http://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=fork&count=true" allowtransparency = "true" frameborder = "0" scrolling = "0" width = "75" height = "20" > < / iframe >
< iframe src = "http://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=watch&count=true" allowtransparency = "true" frameborder = "0" scrolling = "0" width = "73" height = "20" > < / iframe >
< iframe src = "http://ghbtns.com/github-btn.html?user=erikflowers&type=follow&count=true" allowtransparency = "true" frameborder = "0" scrolling = "0" width = "165" height = "20" > < / iframe >
< / p >
< / div >
< / div >
< / section >
< section class = "content container iconExamples" >
< div class = "row" >
< div class = "col-sm-12" >
< h2 > Day / Sunny< / h2 >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-cloudy-gusts" > < / i > < / div >
< div class = "class" > wi-day-cloudy-gusts< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-cloudy-windy" > < / i > < / div >
< div class = "class" > wi-day-cloudy-windy< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-cloudy" > < / i > < / div >
< div class = "class" > wi-day-cloudy< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-fog" > < / i > < / div >
< div class = "class" > wi-day-fog< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-hail" > < / i > < / div >
< div class = "class" > wi-day-hail< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-lightning" > < / i > < / div >
< div class = "class" > wi-day-lightning< / div >
< / div >
< / div >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-rain-mix" > < / i > < / div >
< div class = "class" > wi-day-rain-mix< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-rain-wind" > < / i > < / div >
< div class = "class" > wi-day-rain-wind< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-rain" > < / i > < / div >
< div class = "class" > wi-day-rain< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-showers" > < / i > < / div >
< div class = "class" > wi-day-showers< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-snow" > < / i > < / div >
< div class = "class" > wi-day-snow< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-sprinkle" > < / i > < / div >
< div class = "class" > wi-day-sprinkle< / div >
< / div >
< / div >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-sunny-overcast" > < / i > < / div >
< div class = "class" > wi-day-sunny-overcast< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-sunny" > < / i > < / div >
< div class = "class" > wi-day-sunny< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-storm-showers" > < / i > < / div >
< div class = "class" > wi-day-storm-showers< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-day-thunderstorm" > < / i > < / div >
< div class = "class" > wi-day-thunderstorm< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12" >
< h2 > Neutral / Cloudy< / h2 >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-cloudy-gusts" > < / i > < / div >
< div class = "class" > wi-cloudy-gusts< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-cloudy-windy" > < / i > < / div >
< div class = "class" > wi-cloudy-windy< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-cloudy" > < / i > < / div >
< div class = "class" > wi-cloudy< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-fog" > < / i > < / div >
< div class = "class" > wi-fog< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-hail" > < / i > < / div >
< div class = "class" > wi-hail< / div >
< / div >
< / div >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-lightning" > < / i > < / div >
< div class = "class" > wi-lightning< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-rain-mix" > < / i > < / div >
< div class = "class" > wi-rain-mix< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-rain-wind" > < / i > < / div >
< div class = "class" > wi-rain-wind< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-rain" > < / i > < / div >
< div class = "class" > wi-rain< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-showers" > < / i > < / div >
< div class = "class" > wi-showers< / div >
< / div >
< / div >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-snow" > < / i > < / div >
< div class = "class" > wi-snow< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-sprinkle" > < / i > < / div >
< div class = "class" > wi-sprinkle< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-storm-showers" > < / i > < / div >
< div class = "class" > wi-storm-showers< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-thunderstorm" > < / i > < / div >
< div class = "class" > wi-thunderstorm< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12" >
< h2 > Night / Moons< / h2 >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-cloudy-gusts" > < / i > < / div >
< div class = "class" > wi-night-alt-cloudy-gusts< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-cloudy-windy" > < / i > < / div >
< div class = "class" > wi-night-alt-cloudy-windy< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-hail" > < / i > < / div >
< div class = "class" > wi-night-alt-hail< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-lightning" > < / i > < / div >
< div class = "class" > wi-night-alt-lightning< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-rain-mix" > < / i > < / div >
< div class = "class" > wi-night-alt-rain-mix< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-rain-wind" > < / i > < / div >
< div class = "class" > wi-night-alt-rain-wind< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-rain" > < / i > < / div >
< div class = "class" > wi-night-alt-rain< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-showers" > < / i > < / div >
< div class = "class" > wi-night-alt-showers< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-snow" > < / i > < / div >
< div class = "class" > wi-night-alt-snow< / div >
< / div >
< / div >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-sprinkle" > < / i > < / div >
< div class = "class" > wi-night-alt-sprinkle< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-storm-showers" > < / i > < / div >
< div class = "class" > wi-night-alt-storm-showers< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-alt-thunderstorm" > < / i > < / div >
< div class = "class" > wi-night-alt-thunderstorm< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-clear" > < / i > < / div >
< div class = "class" > wi-night-clear< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-cloudy-gusts" > < / i > < / div >
< div class = "class" > wi-night-cloudy-gusts< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-cloudy-windy" > < / i > < / div >
< div class = "class" > wi-night-cloudy-windy< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-cloudy" > < / i > < / div >
< div class = "class" > wi-night-cloudy< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-hail" > < / i > < / div >
< div class = "class" > wi-night-hail< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-lightning" > < / i > < / div >
< div class = "class" > wi-night-lightning< / div >
< / div >
< / div >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-rain-mix" > < / i > < / div >
< div class = "class" > wi-night-rain-mix< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-rain-wind" > < / i > < / div >
< div class = "class" > wi-night-rain-wind< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-rain" > < / i > < / div >
< div class = "class" > wi-night-rain< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-showers" > < / i > < / div >
< div class = "class" > wi-night-showers< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-snow" > < / i > < / div >
< div class = "class" > wi-night-snow< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-sprinkle" > < / i > < / div >
< div class = "class" > wi-night-sprinkle< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-storm-showers" > < / i > < / div >
< div class = "class" > wi-night-storm-showers< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-thunderstorm" > < / i > < / div >
< div class = "class" > wi-night-thunderstorm< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12" >
< h2 > Miscellaneous Weather < / h2 >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-celcius" > < / i > < / div >
< div class = "class" > wi-celcius< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-cloud-down" > < / i > < / div >
< div class = "class" > wi-cloud-down< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-cloud-refresh" > < / i > < / div >
< div class = "class" > wi-cloud-refresh< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-cloud-up" > < / i > < / div >
< div class = "class" > wi-cloud-up< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-cloud" > < / i > < / div >
< div class = "class" > wi-cloud< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-degrees" > < / i > < / div >
< div class = "class" > wi-degrees< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-down-left" > < / i > < / div >
< div class = "class" > wi-down-left< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-down" > < / i > < / div >
< div class = "class" > wi-down< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-fahrenheit" > < / i > < / div >
< div class = "class" > wi-fahrenheit< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-horizon-alt" > < / i > < / div >
< div class = "class" > wi-horizon-alt< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-horizon" > < / i > < / div >
< div class = "class" > wi-horizon< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-left" > < / i > < / div >
< div class = "class" > wi-left< / div >
< / div >
< / div >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-lightning" > < / i > < / div >
< div class = "class" > wi-lightning< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-night-fog" > < / i > < / div >
< div class = "class" > wi-night-fog< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-refresh-alt" > < / i > < / div >
< div class = "class" > wi-refresh-alt< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-refresh" > < / i > < / div >
< div class = "class" > wi-refresh< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-right" > < / i > < / div >
< div class = "class" > wi-right< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-sprinkles" > < / i > < / div >
< div class = "class" > wi-sprinkles< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-strong-wind" > < / i > < / div >
< div class = "class" > wi-sunrise< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-sunrise" > < / i > < / div >
< div class = "class" > wi-sunrise< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-sunset" > < / i > < / div >
< div class = "class" > wi-sunset< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-thermometer-exterior" > < / i > < / div >
< div class = "class" > wi-thermometer-exterior< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-thermometer-internal" > < / i > < / div >
< div class = "class" > wi-thermometer-internal< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-thermometer" > < / i > < / div >
< div class = "class" > wi-thermometer< / div >
< / div >
< / div >
< div class = "col-sm-4" >
< div class = "example" >
< div class = "icon" > < i class = "wi-tornado" > < / i > < / div >
< div class = "class" > wi-tornado< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-up-right" > < / i > < / div >
< div class = "class" > wi-up-right< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-up" > < / i > < / div >
< div class = "class" > wi-up< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-wind-east" > < / i > < / div >
< div class = "class" > wi-wind-east< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-wind-north-east" > < / i > < / div >
< div class = "class" > wi-wind-north-east< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-wind-north-west" > < / i > < / div >
< div class = "class" > wi-wind-north-west< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-wind-north" > < / i > < / div >
< div class = "class" > wi-wind-north< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-wind-south-east" > < / i > < / div >
< div class = "class" > wi-wind-south-east< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-wind-south-west" > < / i > < / div >
< div class = "class" > wi-wind-south-west< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-wind-south" > < / i > < / div >
< div class = "class" > wi-wind-south< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-wind-west" > < / i > < / div >
< div class = "class" > wi-wind-west< / div >
< / div >
< div class = "example" >
< div class = "icon" > < i class = "wi-windy" > < / i > < / div >
< div class = "class" > wi-windy< / div >
2013-06-29 21:15:46 -06:00
< / div >
< / div >
< / div >
< / section >
< footer >
< div class = "container" >
< div class = "row-fluid" >
2013-08-03 14:05:39 -06:00
< div class = "col-sm-12" >
< p > The Weather Icons project created and maintained by < a href = "http://www.twitter.com/Erik_UX" > Erik Flowers< / a > . Original artwork by < a href = "http://www.twitter.com/artill" > Lukas Bischoff.< / 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 http: / / scripts . sil . org / OFL > SIL OFL 1.1< / a > — Code licensed under < a http: / / opensource . org / licenses / mit-license . html > MIT License< / a > — Documentation licensed under < a http: / / creativecommons . org / licenses / by / 3 . 0 / > CC BY 3.0< / a > < / p >
< / div >
2013-06-29 21:15:46 -06:00
< / div >
< / div >
< / footer >
< / body >
< / html >
