doctype
html
head
title Weather Icons - 219 font icons inspired by Font Awesome and designed for Bootstrap
// 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
meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
link(rel='stylesheet', href='css/styles.css')
link(rel='stylesheet', href='../css/weather-icons.css')
link(rel='stylesheet', href='../css/weather-icons-wind.css')
script(src='//use.typekit.net/hse2lqc.js')
script.
try{Typekit.load();}catch(e){} script(src='js/bootstrap.min.js')
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');
body
header
.container
.row-fluid
.col-sm-12
.icon
.icon-box
.wi.wi-day-cloudy
h1 Weather Icons
h2 215 Weather Themed Icons and CSS
a.download-now(href="#") Download Now
i.wi.wi-sunset
section.social
.container
.row
.col-sm-12
.social-wrapper
ul
li
iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=watch&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='100px', height='20px')
li
iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=fork&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='90px', height='20px')
li
a.twitter-share-button(href='https://twitter.com/share', data-lang='en', data-text='Weather Icons - 215 weather themed font icons!', data-via='Erik_UX', data-count='none') Tweet
li
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");
section.content.container.intro
.row
.col-sm-12
.intro-icons
i.wi.wi-day-lightning
i.wi.wi-night-thunderstorm
i.wi.wi-day-snow
i.wi.wi-sprinkle
i.wi.wi-day-sunny
i.wi.wi-cloudy
i.wi.wi-night-rain-mix
i.wi.wi-sunset
i.wi.wi-sunrise
i.wi.wi-day-cloudy-windy
i.wi.wi-night-rain
i.wi.wi-night-alt-snow
p.headline Weather Icons is the only icon font and CSS with 215 weather themed icons, ready to be dropped right into
a(href="http://getbootstrap.com") Bootstrap,
| or any project that needs high quality weather, maritime, and meteorological based icons!
.features
.row
.col-sm-4
h3
i.wi.wi-day-sunny
| The Freedom of CSS
p Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more!
i.wi.wi-night-thunderstorm.wi-flip-vertical.purple
i.wi.wi-night-thunderstorm.wi-flip-horizontal.purple
i.wi.wi-night-thunderstorm.wi-rotate-90.purple
i.wi.wi-night-thunderstorm.wi-rotate-180.purple
i.wi.wi-night-thunderstorm.wi-rotate-270.purple
.col-sm-4
h3
i.wi.wi-lightning
| Use In Graphic Apps
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!
.col-sm-4
h3
i.wi.wi-night-rain
| Flip, Scale, Transform
p Easily modify the icon look with built-in classes that make it easy.
.row
.col-sm-4
h3
i.wi.wi-earthquake
| Popular Weather API Classes
p Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization.
.col-sm-4
h3
i.wi.wi-thunderstorm
| Specialty Icons
p Included are 28 moon phases, 12 hours of clock, the Beaufort wind force scale, maritime wind warnings,
.col-sm-4
h3
i.wi.wi-volcano.from-270-deg
| Less and Sass Support
p Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.
.row.new-icons
.col-sm-12
h3 25 New 2.0 Icons!
.row
.col-sm-3
ul
li
i.wi.wi-day-cloudy-high
| day-cloudy-high
li
i.wi.wi-day-light-wind
| day-light-wind
li
i.wi.wi-day-sleet
| day-sleet
li
i.wi.wi-day-haze
| day-haze
li
i.wi.wi-night-cloudy-high
| night-cloud-high
li
i.wi.wi-night-alt-partly-cloudy
| night-alt-partly-cloudy
li
i.wi.wi-sleet
| sleet
.col-sm-3
ul
li
i.wi.wi-moonrise
| moonrise
li
i.wi.wi-moonset
| moonset
li
i.wi.wi-night-sleet
| night-sleet
li
i.wi.wi-night-alt-sleet
| night-alt-sleet
li
i.wi.wi-raindrop
| raindrop
li
i.wi.wi-barometer
| barometer
li
i.wi.wi-humidity
| humidity
.col-sm-3
ul
li
i.wi.wi-na
| na (no report)
li
i.wi.wi-flood
| flood
li
i.wi.wi-sandstorm
| sandstorm
li
i.wi.wi-tsunami
| tsunami
li
i.wi.wi-earthquake
| earthquake
li
i.wi.wi-fire
| fire
.col-sm-3
ul
li
i.wi.wi-volcano
| volcano
li
i.wi.wi-train
| train
li
i.wi.wi-small-craft-advisory
| small-craft-advisory
li
i.wi.wi-gale-warning
| gale-warning
li
i.wi.wi-storm-warning
| storm-warning
li
i.wi.wi-hurricane-warning
| hurricane-warning
.meta
a.github-button(href="http://github.com/erikflowers/weather-icons") View the project on GitHub
i.fa.fa-github
p Please make requests or report any issues to the
a(href="https://github.com/erikflowers/weather-icons/issues") main repository on GitHub.
.row
include icon-list
.row-
.col-sm-12
.section-title Utility Classes
.instructions
p Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.
.row
.col-sm-4
h3 Flip
p
code wi-flip-horizontal
p
code wi-flip-vertical
.col-sm-4
h3 Rotate
p
code wi-rotate-90
p
code wi-rotate-180
p
code wi-rotate-270
.col-sm-4
h3 Fixed Width
p
code wi-fw
footer
.container
.row
.col-sm-6
p The Weather Icons project created and maintained by
a(href="http://www.twitter.com/Erik_UX") Erik Flowers
|. v1.0 artwork by
a(href="http://www.twitter.com/artill") Lukas Bischoff
|. v1.1 - 2.0 artwork by
a(href="http://www.twitter.com/Erik_UX") Erik Flowers
p LESS/HTML implementation inspired and heavily influenced by
a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome.
.col-sm-6
p Weather Icons licensed under
a(href="http://scripts.sil.org/OFL") SIL OFL 1.1,
| Code licensed under
a(href="http://opensource.org/licenses/mit-license.html") MIT License,
| Documentation licensed under
a(href="http://creativecommons.org/licenses/by/3.0/") CC BY 3.0
.row
.col-sm-12
i.wi.wi-day-lightning
i.wi.wi-night-thunderstorm
i.wi.wi-day-snow
i.wi.wi-sprinkle
i.wi.wi-day-sunny
i.wi.wi-cloudy
i.wi.wi-night-rain-mix
i.wi.wi-sunset
i.wi.wi-sunrise
i.wi.wi-day-cloudy-windy
i.wi.wi-night-rain
i.wi.wi-night-alt-snow