erikflowers_weather-icons/_docs/jade/index.jade

doctype
html
  head
    title Weather Icons - 222 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 222 Weather Themed Icons and CSS
            a.download-now(href="https://github.com/erikflowers/weather-icons/archive/master.zip") 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 - 222 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 222 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! 
              .col-sm-4
                h3
                  i.wi.wi-lightning
                  | Use In Graphic Apps
                p Weather Icons come with OTF and TTF files, so you can use this page to copy icons and paste them 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 utility classes for fixed-width, flip horizontal, flip vertical, and rotating 90, 180, or 270 degrees.
                  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
            .row
              .col-sm-4
                h3
                  i.wi.wi-earthquake
                  | Popular Weather API Classes
                p Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, Weather Underground, and World Meteorological Organization.  
                  a(href="api-list.html") View the list of API mappings here.
              .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
              .col-sm-12
                .section-title Getting Started
                p To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type  
                  code <i class="wi wi-night-sleet"></i>



          .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.

      include new-icons
      .row
        include icon-list

      .row
        .col-sm-12
          .section-title Utility Classes
          .instructions
            .info-icon
              i.fa.fa-info-circle
            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