2013-06-29 16:08:56 -06:00
!!! 5
html(lang="en")
head
2013-07-31 22:18:57 -06:00
title Weather Icons - Icon Font inspired by Font Awesome and designed for Bootstrap
2013-07-01 18:30:35 -06:00
meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no') script(src='//code.jquery.com/jquery-latest.min.js')
2013-07-31 22:18:57 -06:00
script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js')
2013-06-29 16:08:56 -06:00
script(src='//use.typekit.net/xmb4mjl.js')
2013-08-03 17:29:32 -06:00
script.
2013-07-01 18:30:35 -06:00
try{Typekit.load();}catch(e){} script(src='js/bootstrap.min.js')
2013-06-29 16:08:56 -06:00
script(src='js/scripts.js')
link(rel='stylesheet', href='css/styles.css')
2013-07-01 18:30:35 -06:00
//- link(rel='stylesheet', href='css/weather.css')
2013-08-03 17:29:32 -06:00
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');
2013-07-31 22:18:57 -06:00
body
2013-07-01 18:30:35 -06:00
header
.container
.row-fluid
.col-sm-12
2013-07-31 22:18:57 -06:00
h1 Weather Icons
2013-07-01 18:30:35 -06:00
.icon
i.wi-day-cloudy
2013-06-29 16:08:56 -06:00
2013-07-31 22:18:57 -06:00
section.content.container.intro
.row
2013-08-03 17:29:32 -06:00
.col-sm-12
p.intro-icons
i.wi-day-lightning
i.wi-night-thunderstorm
i.wi-day-snow
i.wi-sprinkles
i.wi-day-sunny
i.wi-cloudy
i.wi-night-rain-mix
i.wi-sunset
i.wi-sunrise
i.wi-day-cloudy-windy
i.wi-night-rain
i.wi-night-alt-snow
p.headline Weather Icons is a font of 92 weather themed icons, ready to be dropped right into
a(href="http://getbootstrap.com") Bootstrap
| or any other project.
i.wi-cloudy
p Inspired by
a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome, they work in essentially the same way.
|. They are infinitley scalable and any CSS that can be applied to text can be applied to them. All you need to do to insert an icon is add the class to an "i" element:
code <i class="wi-day-lightning">
|. At this time, there are no other effects/mixins to do advanced icon manipulation yet.
.download-share
.container
.row.download-here
.download-button
a.download.btn.btn-primary.btn-large(href="https://github.com/erikflowers/weather-icons")
|Download Beta 1
i.wi-cloud
.row.social
.col-sm-12
p
a.twitter-share-button(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') Tweet
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");
a.twitter-follow-button(href='https://twitter.com/Erik_UX', data-show-count='false', data-lang='en') Follow @Erik_UX
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");
a.twitter-follow-button(href='https://twitter.com/artill', data-show-count='false', data-lang='en') Follow @artill
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");
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(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(src='http://ghbtns.com/github-btn.html?user=erikflowers&type=follow&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='165', height='20')
2013-07-31 22:18:57 -06:00
section.content.container.iconExamples
.row
.col-sm-12
2013-08-03 17:29:32 -06:00
h2 Day / Sunny
2013-07-31 22:18:57 -06:00
.row
.col-sm-4
.example
.icon
i.wi-day-cloudy-gusts
.class wi-day-cloudy-gusts
.example
.icon
i.wi-day-cloudy-windy
.class wi-day-cloudy-windy
.example
.icon
i.wi-day-cloudy
.class wi-day-cloudy
.example
.icon
i.wi-day-fog
.class wi-day-fog
.example
.icon
i.wi-day-hail
.class wi-day-hail
.example
.icon
i.wi-day-lightning
.class wi-day-lightning
.col-sm-4
.example
.icon
i.wi-day-rain-mix
.class wi-day-rain-mix
.example
.icon
i.wi-day-rain-wind
.class wi-day-rain-wind
.example
.icon
i.wi-day-rain
.class wi-day-rain
.example
.icon
i.wi-day-showers
.class wi-day-showers
.example
.icon
i.wi-day-snow
.class wi-day-snow
.example
.icon
i.wi-day-sprinkle
.class wi-day-sprinkle
.col-sm-4
.example
.icon
i.wi-day-sunny-overcast
.class wi-day-sunny-overcast
.example
.icon
i.wi-day-sunny
.class wi-day-sunny
.example
.icon
i.wi-day-storm-showers
.class wi-day-storm-showers
.example
.icon
i.wi-day-thunderstorm
.class wi-day-thunderstorm
.row
.col-sm-12
2013-08-03 17:29:32 -06:00
h2 Neutral / Cloudy
2013-07-31 22:18:57 -06:00
.row
.col-sm-4
.example
.icon
i.wi-cloudy-gusts
.class wi-cloudy-gusts
.example
.icon
i.wi-cloudy-windy
.class wi-cloudy-windy
.example
.icon
i.wi-cloudy
.class wi-cloudy
.example
.icon
i.wi-fog
.class wi-fog
.example
.icon
i.wi-hail
.class wi-hail
.col-sm-4
.example
.icon
i.wi-lightning
.class wi-lightning
.example
.icon
i.wi-rain-mix
.class wi-rain-mix
.example
.icon
i.wi-rain-wind
.class wi-rain-wind
.example
.icon
i.wi-rain
.class wi-rain
.example
.icon
i.wi-showers
.class wi-showers
.col-sm-4
.example
.icon
i.wi-snow
.class wi-snow
.example
.icon
i.wi-sprinkle
.class wi-sprinkle
.example
.icon
i.wi-storm-showers
.class wi-storm-showers
.example
.icon
i.wi-thunderstorm
.class wi-thunderstorm
.row
.col-sm-12
2013-08-03 17:29:32 -06:00
h2 Night / Moons
2013-07-31 22:18:57 -06:00
.row
.col-sm-4
.example
.icon
i.wi-night-alt-cloudy-gusts
.class wi-night-alt-cloudy-gusts
.example
.icon
i.wi-night-alt-cloudy-windy
.class wi-night-alt-cloudy-windy
.example
.icon
i.wi-night-alt-hail
.class wi-night-alt-hail
.example
.icon
i.wi-night-alt-lightning
.class wi-night-alt-lightning
.example
.icon
i.wi-night-alt-rain-mix
.class wi-night-alt-rain-mix
.example
.icon
i.wi-night-alt-rain-wind
.class wi-night-alt-rain-wind
.example
.icon
i.wi-night-alt-rain
.class wi-night-alt-rain
.example
.icon
i.wi-night-alt-showers
.class wi-night-alt-showers
.example
.icon
i.wi-night-alt-snow
.class wi-night-alt-snow
.col-sm-4
.example
.icon
i.wi-night-alt-sprinkle
.class wi-night-alt-sprinkle
.example
.icon
i.wi-night-alt-storm-showers
.class wi-night-alt-storm-showers
.example
.icon
i.wi-night-alt-thunderstorm
.class wi-night-alt-thunderstorm
.example
.icon
i.wi-night-clear
.class wi-night-clear
.example
.icon
i.wi-night-cloudy-gusts
.class wi-night-cloudy-gusts
.example
.icon
i.wi-night-cloudy-windy
.class wi-night-cloudy-windy
.example
.icon
i.wi-night-cloudy
.class wi-night-cloudy
.example
.icon
i.wi-night-hail
.class wi-night-hail
.example
.icon
i.wi-night-lightning
.class wi-night-lightning
.col-sm-4
.example
.icon
i.wi-night-rain-mix
.class wi-night-rain-mix
.example
.icon
i.wi-night-rain-wind
.class wi-night-rain-wind
.example
.icon
i.wi-night-rain
.class wi-night-rain
.example
.icon
i.wi-night-showers
.class wi-night-showers
.example
.icon
i.wi-night-snow
.class wi-night-snow
.example
.icon
i.wi-night-sprinkle
.class wi-night-sprinkle
.example
.icon
i.wi-night-storm-showers
.class wi-night-storm-showers
.example
.icon
i.wi-night-thunderstorm
.class wi-night-thunderstorm
2013-06-29 16:08:56 -06:00
.row
.col-sm-12
2013-08-03 17:29:32 -06:00
h2 Miscellaneous Weather
2013-07-31 22:18:57 -06:00
.row
.col-sm-4
.example
.icon
i.wi-celcius
.class wi-celcius
.example
.icon
i.wi-cloud-down
.class wi-cloud-down
.example
.icon
i.wi-cloud-refresh
.class wi-cloud-refresh
.example
.icon
i.wi-cloud-up
.class wi-cloud-up
.example
.icon
i.wi-cloud
.class wi-cloud
.example
.icon
i.wi-degrees
.class wi-degrees
.example
.icon
i.wi-down-left
.class wi-down-left
.example
.icon
i.wi-down
.class wi-down
.example
.icon
i.wi-fahrenheit
.class wi-fahrenheit
.example
.icon
i.wi-horizon-alt
.class wi-horizon-alt
.example
.icon
i.wi-horizon
.class wi-horizon
.example
.icon
i.wi-left
.class wi-left
.col-sm-4
.example
.icon
i.wi-lightning
.class wi-lightning
.example
.icon
i.wi-night-fog
.class wi-night-fog
.example
.icon
i.wi-refresh-alt
.class wi-refresh-alt
.example
.icon
i.wi-refresh
.class wi-refresh
.example
.icon
i.wi-right
.class wi-right
.example
.icon
i.wi-sprinkles
.class wi-sprinkles
.example
.icon
i.wi-strong-wind
.class wi-sunrise
.example
.icon
i.wi-sunrise
.class wi-sunrise
.example
.icon
i.wi-sunset
.class wi-sunset
.example
.icon
i.wi-thermometer-exterior
.class wi-thermometer-exterior
.example
.icon
i.wi-thermometer-internal
.class wi-thermometer-internal
.example
.icon
i.wi-thermometer
.class wi-thermometer
.col-sm-4
.example
.icon
i.wi-tornado
.class wi-tornado
.example
.icon
i.wi-up-right
.class wi-up-right
.example
.icon
i.wi-up
.class wi-up
.example
.icon
i.wi-wind-east
.class wi-wind-east
.example
.icon
i.wi-wind-north-east
.class wi-wind-north-east
.example
.icon
i.wi-wind-north-west
.class wi-wind-north-west
.example
.icon
i.wi-wind-north
.class wi-wind-north
.example
.icon
i.wi-wind-south-east
.class wi-wind-south-east
.example
.icon
i.wi-wind-south-west
.class wi-wind-south-west
.example
.icon
i.wi-wind-south
.class wi-wind-south
.example
.icon
i.wi-wind-west
.class wi-wind-west
.example
.icon
i.wi-windy
.class wi-windy
2013-06-29 16:08:56 -06:00
2013-08-03 17:29:32 -06:00
.container
.row
.col-sm-12
.beta
.title Version Beta 1
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
p The icon designs are originally by
a(href="https://twitter.com/artill") Lukas Bischoff.
|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).
2013-07-01 18:30:35 -06:00
footer
.container
.row-fluid
2013-08-03 17:29:32 -06:00
.col-sm-12
p The Weather Icons project created and maintained by
a(href="http://www.twitter.com/Erik_UX") Erik Flowers
|. Original artwork by
a(href="http://www.twitter.com/artill") Lukas Bischoff.
p LESS/HTML implementation inspired and heavily influenced by
a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome.
p Weather Icons licensed under
a("http://scripts.sil.org/OFL") SIL OFL 1.1
| — Code licensed under
a("http://opensource.org/licenses/mit-license.html") MIT License
| — Documentation licensed under
a("http://creativecommons.org/licenses/by/3.0/") CC BY 3.0
