Mirrors
/
erikflowers_weather-icons
mirror of https://github.com/erikflowers/weather-icons.git
2
0
Fork 0
Code Issues Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
gh-pages
2.1.0-wip
2.0-wip
v2.0.0
v1.3.2
v1.3.1
v1.3.0
v1.2.1
v1.2.0
v0.0.1
2.0.9
2.0.8
2.0.7
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.12
2.0.11
2.0.10
2.0.1
1.2
1.1ghpagesendpoint
1.1endpoint
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f7f6810f3e'
${ noResults }
erikflowers_weather-icons/_docs/gh-pages/index.html

1646 lines
76 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<title>Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap</title>
<!-- 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>
<script>try{Typekit.load();}catch(e){}</script>
<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>
</head>
<body>
<header>
<div class="container">
<div class="row-fluid">
<div class="col-sm-12">
<div class="icon">
<div class="icon-box">
<div class="wi wi-day-cloudy"></div>
</div>
</div>
<h1>Weather Icons</h1>
<h2>222 Weather Themed Icons and CSS</h2><a href="https://github.com/erikflowers/weather-icons/archive/master.zip" class="download-now">Download Now <i class="wi wi-sunset"></i></a>
</div>
</div>
</div>
</header>
<section class="social">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="social-wrapper">
<ul>
<li>
<iframe src="https://ghbtns.com/github-btn.html?user=erikflowers&amp;repo=weather-icons&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px" class="github-btn"></iframe>
</li>
<li>
<iframe src="https://ghbtns.com/github-btn.html?user=erikflowers&amp;repo=weather-icons&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px" class="github-btn"></iframe>
</li>
<li><a href="https://twitter.com/share" data-lang="en" data-text="Weather Icons - 222 weather themed font icons!" data-via="Erik_UX" data-count="none" class="twitter-share-button">Tweet</a></li>
<li><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>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="content container intro">
<div class="row">
<div class="col-sm-12">
<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">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,</a> or any project that needs high quality weather, maritime, and meteorological based icons!</p>
<div class="features">
<div class="row">
<div class="col-sm-4">
<h3><i class="wi wi-day-sunny"></i>The Freedom of CSS</h3>
<p>Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! </p>
</div>
<div class="col-sm-4">
<h3><i class="wi wi-lightning"></i>Use In Graphic Apps</h3>
<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!</p>
</div>
<div class="col-sm-4">
<h3><i class="wi wi-night-rain"></i>Flip, Scale, Transform</h3>
<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 class="wi wi-night-thunderstorm wi-flip-vertical purple"></i><i class="wi wi-night-thunderstorm wi-flip-horizontal purple"></i><i class="wi wi-night-thunderstorm wi-rotate-90 purple"></i><i class="wi wi-night-thunderstorm wi-rotate-180 purple"></i><i class="wi wi-night-thunderstorm wi-rotate-270 purple"></i></p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h3><i class="wi wi-earthquake"></i>Popular Weather API Classes</h3>
<p>Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization. <a href="api-list.html">View the list of API mappings here.</a></p>
</div>
<div class="col-sm-4">
<h3><i class="wi wi-thunderstorm"></i>Specialty Icons</h3>
<p>Included are 28 moon phases, 12 hours of clock, the Beaufort wind force scale, maritime wind warnings,</p>
</div>
<div class="col-sm-4">
<h3><i class="wi wi-volcano from-270-deg"></i>Less and Sass Support</h3>
<p>Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="section-title">Getting Started</div>
<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>&lt;i class="wi wi-night-sleet"&gt;&lt;/i&gt;</code></p>
<p>Weather icons is also hosted on cdn.js, to use the CSS from there, just include:<br><code>https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.1/css/weather-icons.min.css</code></p>
</div>
</div>
</div>
<div class="meta"><a href="http://github.com/erikflowers/weather-icons" class="github-button">View the project on GitHub <i class="fa fa-github"></i></a>
<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>
</div>
</div>
<div class="row new-icons">
<div class="col-sm-12">
<h3>25 New 2.0 Icons!</h3>
<div class="row">
<div class="col-sm-3">
<ul>
<li><i class="wi wi-day-cloudy-high"></i>day-cloudy-high</li>
<li><i class="wi wi-day-light-wind"></i>day-light-wind</li>
<li><i class="wi wi-day-sleet"></i>day-sleet</li>
<li><i class="wi wi-day-haze"></i>day-haze</li>
<li><i class="wi wi-night-cloudy-high"></i>night-cloud-high</li>
<li><i class="wi wi-night-alt-partly-cloudy"></i>night-alt-partly-cloudy</li>
<li><i class="wi wi-sleet"></i>sleet</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-moonrise"></i>moonrise</li>
<li><i class="wi wi-moonset"></i>moonset</li>
<li><i class="wi wi-night-sleet"></i>night-sleet</li>
<li><i class="wi wi-night-alt-sleet"></i>night-alt-sleet</li>
<li><i class="wi wi-raindrop"></i>raindrop</li>
<li><i class="wi wi-barometer"></i>barometer</li>
<li><i class="wi wi-humidity"></i>humidity</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-na"></i>na (no report)</li>
<li><i class="wi wi-flood"></i>flood</li>
<li><i class="wi wi-sandstorm"></i>sandstorm</li>
<li><i class="wi wi-tsunami"></i>tsunami</li>
<li><i class="wi wi-earthquake"></i>earthquake</li>
<li><i class="wi wi-fire"></i>fire</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-volcano"></i>volcano</li>
<li><i class="wi wi-train"></i>train</li>
<li><i class="wi wi-small-craft-advisory"></i>small-craft-advisory</li>
<li><i class="wi wi-gale-warning"></i>gale-warning</li>
<li><i class="wi wi-storm-warning"></i>storm-warning</li>
<li><i class="wi wi-hurricane-warning"></i>hurricane-warning</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 icon-set">
<div class="section-title">Daytime</div>
<div class="row">
<div class="icon-wrap">
<div class="icon">&#xf00d;</div>
<div class="icon-name">wi-day-sunny</div>
<div class="icon_unicode">f00d </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf002;</div>
<div class="icon-name">wi-day-cloudy</div>
<div class="icon_unicode">f002 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf000;</div>
<div class="icon-name">wi-day-cloudy-gusts</div>
<div class="icon_unicode">f000 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf001;</div>
<div class="icon-name">wi-day-cloudy-windy</div>
<div class="icon_unicode">f001 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf003;</div>
<div class="icon-name">wi-day-fog</div>
<div class="icon_unicode">f003 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf004;</div>
<div class="icon-name">wi-day-hail</div>
<div class="icon_unicode">f004 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0b6;</div>
<div class="icon-name">wi-day-haze</div>
<div class="icon_unicode">f0b6 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf005;</div>
<div class="icon-name">wi-day-lightning</div>
<div class="icon_unicode">f005 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf008;</div>
<div class="icon-name">wi-day-rain</div>
<div class="icon_unicode">f008 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf006;</div>
<div class="icon-name">wi-day-rain-mix</div>
<div class="icon_unicode">f006 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf007;</div>
<div class="icon-name">wi-day-rain-wind</div>
<div class="icon_unicode">f007 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf009;</div>
<div class="icon-name">wi-day-showers</div>
<div class="icon_unicode">f009 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0b2;</div>
<div class="icon-name">wi-day-sleet</div>
<div class="icon_unicode">f0b2 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf068;</div>
<div class="icon-name">wi-day-sleet-storm</div>
<div class="icon_unicode">f068 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf00a;</div>
<div class="icon-name">wi-day-snow</div>
<div class="icon_unicode">f00a </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf06b;</div>
<div class="icon-name">wi-day-snow-thunderstorm</div>
<div class="icon_unicode">f06b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf065;</div>
<div class="icon-name">wi-day-snow-wind</div>
<div class="icon_unicode">f065 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf00b;</div>
<div class="icon-name">wi-day-sprinkle</div>
<div class="icon_unicode">f00b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf00e;</div>
<div class="icon-name">wi-day-storm-showers</div>
<div class="icon_unicode">f00e </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf00c;</div>
<div class="icon-name">wi-day-sunny-overcast</div>
<div class="icon_unicode">f00c </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf010;</div>
<div class="icon-name">wi-day-thunderstorm</div>
<div class="icon_unicode">f010 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf085;</div>
<div class="icon-name">wi-day-windy</div>
<div class="icon_unicode">f085 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf06e;</div>
<div class="icon-name">wi-solar-eclipse</div>
<div class="icon_unicode">f06e </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf072;</div>
<div class="icon-name">wi-hot</div>
<div class="icon_unicode">f072 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf07d;</div>
<div class="icon-name">wi-day-cloudy-high</div>
<div class="icon_unicode">f07d </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c4;</div>
<div class="icon-name">wi-day-light-wind</div>
<div class="icon_unicode">f0c4 </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Nighttime</div>
<div class="row">
<div class="icon-wrap">
<div class="icon">&#xf02e;</div>
<div class="icon-name">wi-night-clear</div>
<div class="icon_unicode">f02e </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf086;</div>
<div class="icon-name">wi-night-alt-cloudy</div>
<div class="icon_unicode">f086 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf022;</div>
<div class="icon-name">wi-night-alt-cloudy-gusts</div>
<div class="icon_unicode">f022 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf023;</div>
<div class="icon-name">wi-night-alt-cloudy-windy</div>
<div class="icon_unicode">f023 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf024;</div>
<div class="icon-name">wi-night-alt-hail</div>
<div class="icon_unicode">f024 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf025;</div>
<div class="icon-name">wi-night-alt-lightning</div>
<div class="icon_unicode">f025 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf028;</div>
<div class="icon-name">wi-night-alt-rain</div>
<div class="icon_unicode">f028 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf026;</div>
<div class="icon-name">wi-night-alt-rain-mix</div>
<div class="icon_unicode">f026 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf027;</div>
<div class="icon-name">wi-night-alt-rain-wind</div>
<div class="icon_unicode">f027 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf029;</div>
<div class="icon-name">wi-night-alt-showers</div>
<div class="icon_unicode">f029 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0b4;</div>
<div class="icon-name">wi-night-alt-sleet</div>
<div class="icon_unicode">f0b4 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf06a;</div>
<div class="icon-name">wi-night-alt-sleet-storm</div>
<div class="icon_unicode">f06a </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf02a;</div>
<div class="icon-name">wi-night-alt-snow</div>
<div class="icon_unicode">f02a </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf06d;</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">&#xf067;</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">&#xf02b;</div>
<div class="icon-name">wi-night-alt-sprinkle</div>
<div class="icon_unicode">f02b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf02c;</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">&#xf02d;</div>
<div class="icon-name">wi-night-alt-thunderstorm</div>
<div class="icon_unicode">f02d </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf031;</div>
<div class="icon-name">wi-night-cloudy</div>
<div class="icon_unicode">f031 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf02f;</div>
<div class="icon-name">wi-night-cloudy-gusts</div>
<div class="icon_unicode">f02f </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf030;</div>
<div class="icon-name">wi-night-cloudy-windy</div>
<div class="icon_unicode">f030 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04a;</div>
<div class="icon-name">wi-night-fog</div>
<div class="icon_unicode">f04a </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf032;</div>
<div class="icon-name">wi-night-hail</div>
<div class="icon_unicode">f032 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf033;</div>
<div class="icon-name">wi-night-lightning</div>
<div class="icon_unicode">f033 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf083;</div>
<div class="icon-name">wi-night-partly-cloudy</div>
<div class="icon_unicode">f083 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf036;</div>
<div class="icon-name">wi-night-rain</div>
<div class="icon_unicode">f036 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf034;</div>
<div class="icon-name">wi-night-rain-mix</div>
<div class="icon_unicode">f034 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf035;</div>
<div class="icon-name">wi-night-rain-wind</div>
<div class="icon_unicode">f035 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf037;</div>
<div class="icon-name">wi-night-showers</div>
<div class="icon_unicode">f037 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0b3;</div>
<div class="icon-name">wi-night-sleet</div>
<div class="icon_unicode">f0b3 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf069;</div>
<div class="icon-name">wi-night-sleet-storm</div>
<div class="icon_unicode">f069 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf038;</div>
<div class="icon-name">wi-night-snow</div>
<div class="icon_unicode">f038 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf06c;</div>
<div class="icon-name">wi-night-snow-thunderstorm</div>
<div class="icon_unicode">f06c </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf066;</div>
<div class="icon-name">wi-night-snow-wind</div>
<div class="icon_unicode">f066 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf039;</div>
<div class="icon-name">wi-night-sprinkle</div>
<div class="icon_unicode">f039 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03a;</div>
<div class="icon-name">wi-night-storm-showers</div>
<div class="icon_unicode">f03a </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03b;</div>
<div class="icon-name">wi-night-thunderstorm</div>
<div class="icon_unicode">f03b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf070;</div>
<div class="icon-name">wi-lunar-eclipse</div>
<div class="icon_unicode">f070 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf077;</div>
<div class="icon-name">wi-stars</div>
<div class="icon_unicode">f077 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01d;</div>
<div class="icon-name">wi-storm-showers</div>
<div class="icon_unicode">f01d </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01e;</div>
<div class="icon-name">wi-thunderstorm</div>
<div class="icon_unicode">f01e </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf07e;</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">&#xf080;</div>
<div class="icon-name">wi-night-cloudy-high</div>
<div class="icon_unicode">f080 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf081;</div>
<div class="icon-name">wi-night-alt-partly-cloudy</div>
<div class="icon_unicode">f081 </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Neutral</div>
<div class="row">
<div class="icon-wrap">
<div class="icon">&#xf041;</div>
<div class="icon-name">wi-cloud</div>
<div class="icon_unicode">f041 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf013;</div>
<div class="icon-name">wi-cloudy</div>
<div class="icon_unicode">f013 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf011;</div>
<div class="icon-name">wi-cloudy-gusts</div>
<div class="icon_unicode">f011 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf012;</div>
<div class="icon-name">wi-cloudy-windy</div>
<div class="icon_unicode">f012 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf014;</div>
<div class="icon-name">wi-fog</div>
<div class="icon_unicode">f014 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf015;</div>
<div class="icon-name">wi-hail</div>
<div class="icon_unicode">f015 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf019;</div>
<div class="icon-name">wi-rain</div>
<div class="icon_unicode">f019 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf017;</div>
<div class="icon-name">wi-rain-mix</div>
<div class="icon_unicode">f017 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf018;</div>
<div class="icon-name">wi-rain-wind</div>
<div class="icon_unicode">f018 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01a;</div>
<div class="icon-name">wi-showers</div>
<div class="icon_unicode">f01a </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0b5;</div>
<div class="icon-name">wi-sleet</div>
<div class="icon_unicode">f0b5 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01b;</div>
<div class="icon-name">wi-snow</div>
<div class="icon_unicode">f01b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01c;</div>
<div class="icon-name">wi-sprinkle</div>
<div class="icon_unicode">f01c </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01d;</div>
<div class="icon-name">wi-storm-showers</div>
<div class="icon_unicode">f01d </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01e;</div>
<div class="icon-name">wi-thunderstorm</div>
<div class="icon_unicode">f01e </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf064;</div>
<div class="icon-name">wi-snow-wind</div>
<div class="icon_unicode">f064 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01b;</div>
<div class="icon-name">wi-snow</div>
<div class="icon_unicode">f01b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf074;</div>
<div class="icon-name">wi-smog</div>
<div class="icon_unicode">f074 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf062;</div>
<div class="icon-name">wi-smoke</div>
<div class="icon_unicode">f062 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf016;</div>
<div class="icon-name">wi-lightning</div>
<div class="icon_unicode">f016 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04e;</div>
<div class="icon-name">wi-raindrops</div>
<div class="icon_unicode">f04e </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf078;</div>
<div class="icon-name">wi-raindrop</div>
<div class="icon_unicode">f078 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf063;</div>
<div class="icon-name">wi-dust</div>
<div class="icon_unicode">f063 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf076;</div>
<div class="icon-name">wi-snowflake-cold</div>
<div class="icon_unicode">f076 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf021;</div>
<div class="icon-name">wi-windy</div>
<div class="icon_unicode">f021 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf050;</div>
<div class="icon-name">wi-strong-wind</div>
<div class="icon_unicode">f050 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf082;</div>
<div class="icon-name">wi-sandstorm</div>
<div class="icon_unicode">f082 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c6;</div>
<div class="icon-name">wi-earthquake</div>
<div class="icon_unicode">f0c6 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c7;</div>
<div class="icon-name">wi-fire</div>
<div class="icon_unicode">f0c7 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf07c;</div>
<div class="icon-name">wi-flood</div>
<div class="icon_unicode">f07c </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf071;</div>
<div class="icon-name">wi-meteor</div>
<div class="icon_unicode">f071 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c5;</div>
<div class="icon-name">wi-tsunami</div>
<div class="icon_unicode">f0c5 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c8;</div>
<div class="icon-name">wi-volcano</div>
<div class="icon_unicode">f0c8 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf073;</div>
<div class="icon-name">wi-hurricane</div>
<div class="icon_unicode">f073 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf056;</div>
<div class="icon-name">wi-tornado</div>
<div class="icon_unicode">f056 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0cc;</div>
<div class="icon-name">wi-small-craft-advisory</div>
<div class="icon_unicode">f0cc </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0cd;</div>
<div class="icon-name">wi-gale-warning</div>
<div class="icon_unicode">f0cd </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0ce;</div>
<div class="icon-name">wi-storm-warning</div>
<div class="icon_unicode">f0ce </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0cf;</div>
<div class="icon-name">wi-hurricane-warning</div>
<div class="icon_unicode">f0cf </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0b1;</div>
<div class="icon-name">wi-wind-direction</div>
<div class="icon_unicode">f0b1 </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Miscellaneous</div>
<div class="row">
<div class="icon-wrap">
<div class="icon">&#xf075;</div>
<div class="icon-name">wi-alien</div>
<div class="icon_unicode">f075 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03c;</div>
<div class="icon-name">wi-celsius</div>
<div class="icon_unicode">f03c </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf045;</div>
<div class="icon-name">wi-fahrenheit</div>
<div class="icon_unicode">f045 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf042;</div>
<div class="icon-name">wi-degrees</div>
<div class="icon_unicode">f042 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf055;</div>
<div class="icon-name">wi-thermometer</div>
<div class="icon_unicode">f055 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf053;</div>
<div class="icon-name">wi-thermometer-exterior</div>
<div class="icon_unicode">f053 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf054;</div>
<div class="icon-name">wi-thermometer-internal</div>
<div class="icon_unicode">f054 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03d;</div>
<div class="icon-name">wi-cloud-down</div>
<div class="icon_unicode">f03d </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf040;</div>
<div class="icon-name">wi-cloud-up</div>
<div class="icon_unicode">f040 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03e;</div>
<div class="icon-name">wi-cloud-refresh</div>
<div class="icon_unicode">f03e </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf047;</div>
<div class="icon-name">wi-horizon</div>
<div class="icon_unicode">f047 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf046;</div>
<div class="icon-name">wi-horizon-alt</div>
<div class="icon_unicode">f046 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf051;</div>
<div class="icon-name">wi-sunrise</div>
<div class="icon_unicode">f051 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf052;</div>
<div class="icon-name">wi-sunset</div>
<div class="icon_unicode">f052 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c9;</div>
<div class="icon-name">wi-moonrise</div>
<div class="icon_unicode">f0c9 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0ca;</div>
<div class="icon-name">wi-moonset</div>
<div class="icon_unicode">f0ca </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04c;</div>
<div class="icon-name">wi-refresh</div>
<div class="icon_unicode">f04c </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04b;</div>
<div class="icon-name">wi-refresh-alt</div>
<div class="icon_unicode">f04b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf084;</div>
<div class="icon-name">wi-umbrella</div>
<div class="icon_unicode">f084 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf079;</div>
<div class="icon-name">wi-barometer</div>
<div class="icon_unicode">f079 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf07a;</div>
<div class="icon-name">wi-humidity</div>
<div class="icon_unicode">f07a </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf07b;</div>
<div class="icon-name">wi-na</div>
<div class="icon_unicode">f07b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0cb;</div>
<div class="icon-name">wi-train</div>
<div class="icon_unicode">f0cb </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Moon Phases</div>
<div class="instructions">
<div class="info-icon"><i class="fa fa-info-circle"></i></div>
<p>The moons are split into 28 icons, to correspond neatly with the 28 day moon cycle. There is a primary set and alternate set. The primary set is meant to be interpreted as: where there are pixels, that is the illuminated part of the moon. The alternate set is meant to be interpreted as: where there are pixels, that is the shadowed part of the moon.</p>
</div>
<div class="row">
<div class="icon-wrap">
<div class="icon">&#xf095;</div>
<div class="icon-name">wi-moon-new</div>
<div class="icon_unicode">f095 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf096;</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">&#xf097;</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">&#xf098;</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">&#xf099;</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">&#xf09a;</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">&#xf09b;</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">&#xf09c;</div>
<div class="icon-name">wi-moon-first-quarter</div>
<div class="icon_unicode">f09c </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf09d;</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">&#xf09e;</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">&#xf09f;</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">&#xf0a0;</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">&#xf0a1;</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">&#xf0a2;</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">&#xf0a3;</div>
<div class="icon-name">wi-moon-full</div>
<div class="icon_unicode">f0a3 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0a4;</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">&#xf0a5;</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">&#xf0a6;</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">&#xf0a7;</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">&#xf0a8;</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">&#xf0a9;</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">&#xf0aa;</div>
<div class="icon-name">wi-moon-third-quarter</div>
<div class="icon_unicode">f0aa </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0ab;</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">&#xf0ac;</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">&#xf0ad;</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">&#xf0ae;</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">&#xf0af;</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">&#xf0b0;</div>
<div class="icon-name">wi-moon-waning-crescent-6</div>
<div class="icon_unicode">f0b0 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0eb;</div>
<div class="icon-name">wi-moon-alt-new</div>
<div class="icon_unicode">f0eb </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d0;</div>
<div class="icon-name">wi-moon-alt-waxing-cresent-1</div>
<div class="icon_unicode">f0d0 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d1;</div>
<div class="icon-name">wi-moon-alt-waxing-cresent-2</div>
<div class="icon_unicode">f0d1 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d2;</div>
<div class="icon-name">wi-moon-alt-waxing-cresent-3</div>
<div class="icon_unicode">f0d2 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d3;</div>
<div class="icon-name">wi-moon-alt-waxing-cresent-4</div>
<div class="icon_unicode">f0d3 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d4;</div>
<div class="icon-name">wi-moon-alt-waxing-cresent-5</div>
<div class="icon_unicode">f0d4 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d5;</div>
<div class="icon-name">wi-moon-alt-waxing-cresent-6</div>
<div class="icon_unicode">f0d5 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d6;</div>
<div class="icon-name">wi-moon-alt-first-quarter</div>
<div class="icon_unicode">f0d6 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d7;</div>
<div class="icon-name">wi-moon-alt-waxing-gibbous-1</div>
<div class="icon_unicode">f0d7 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d8;</div>
<div class="icon-name">wi-moon-alt-waxing-gibbous-2</div>
<div class="icon_unicode">f0d8 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0d9;</div>
<div class="icon-name">wi-moon-alt-waxing-gibbous-3</div>
<div class="icon_unicode">f0d9 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0da;</div>
<div class="icon-name">wi-moon-alt-waxing-gibbous-4</div>
<div class="icon_unicode">f0da </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0db;</div>
<div class="icon-name">wi-moon-alt-waxing-gibbous-5</div>
<div class="icon_unicode">f0db </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0dc;</div>
<div class="icon-name">wi-moon-alt-waxing-gibbous-6</div>
<div class="icon_unicode">f0dc </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0dd;</div>
<div class="icon-name">wi-moon-alt-full</div>
<div class="icon_unicode">f0dd </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0de;</div>
<div class="icon-name">wi-moon-alt-waning-gibbous-1</div>
<div class="icon_unicode">f0de </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0df;</div>
<div class="icon-name">wi-moon-alt-waning-gibbous-2</div>
<div class="icon_unicode">f0df </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e0;</div>
<div class="icon-name">wi-moon-alt-waning-gibbous-3</div>
<div class="icon_unicode">f0e0 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e1;</div>
<div class="icon-name">wi-moon-alt-waning-gibbous-4</div>
<div class="icon_unicode">f0e1 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e2;</div>
<div class="icon-name">wi-moon-alt-waning-gibbous-5</div>
<div class="icon_unicode">f0e2 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e3;</div>
<div class="icon-name">wi-moon-alt-waning-gibbous-6</div>
<div class="icon_unicode">f0e3 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e4;</div>
<div class="icon-name">wi-moon-alt-third-quarter</div>
<div class="icon_unicode">f0e4 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e5;</div>
<div class="icon-name">wi-moon-alt-waning-crescent-1</div>
<div class="icon_unicode">f0e5 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e6;</div>
<div class="icon-name">wi-moon-alt-waning-crescent-2</div>
<div class="icon_unicode">f0e6 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e7;</div>
<div class="icon-name">wi-moon-alt-waning-crescent-3</div>
<div class="icon_unicode">f0e7 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e8;</div>
<div class="icon-name">wi-moon-alt-waning-crescent-4</div>
<div class="icon_unicode">f0e8 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0e9;</div>
<div class="icon-name">wi-moon-alt-waning-crescent-5</div>
<div class="icon_unicode">f0e9 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0ea;</div>
<div class="icon-name">wi-moon-alt-waning-crescent-6</div>
<div class="icon_unicode">f0ea </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Time</div>
<div class="row">
<div class="icon-wrap">
<div class="icon">&#xf08a;</div>
<div class="icon-name">wi-time-1</div>
<div class="icon_unicode">f08a </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf08b;</div>
<div class="icon-name">wi-time-2</div>
<div class="icon_unicode">f08b </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf08c;</div>
<div class="icon-name">wi-time-3</div>
<div class="icon_unicode">f08c </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf08d;</div>
<div class="icon-name">wi-time-4</div>
<div class="icon_unicode">f08d </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf08e;</div>
<div class="icon-name">wi-time-5</div>
<div class="icon_unicode">f08e </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf08f;</div>
<div class="icon-name">wi-time-6</div>
<div class="icon_unicode">f08f </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf090;</div>
<div class="icon-name">wi-time-7</div>
<div class="icon_unicode">f090 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf091;</div>
<div class="icon-name">wi-time-8</div>
<div class="icon_unicode">f091 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf092;</div>
<div class="icon-name">wi-time-9</div>
<div class="icon_unicode">f092 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf093;</div>
<div class="icon-name">wi-time-10</div>
<div class="icon_unicode">f093 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf094;</div>
<div class="icon-name">wi-time-11</div>
<div class="icon_unicode">f094 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf089;</div>
<div class="icon-name">wi-time-12</div>
<div class="icon_unicode">f089 </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Directional Arrows</div>
<div class="row">
<div class="icon-wrap">
<div class="icon">&#xf058;</div>
<div class="icon-name">wi-direction-up</div>
<div class="icon_unicode">f058 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf057;</div>
<div class="icon-name">wi-direction-up-right</div>
<div class="icon_unicode">f057 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04d;</div>
<div class="icon-name">wi-direction-right</div>
<div class="icon_unicode">f04d </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf088;</div>
<div class="icon-name">wi-direction-down-right</div>
<div class="icon_unicode">f088 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf044;</div>
<div class="icon-name">wi-direction-down</div>
<div class="icon_unicode">f044 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf043;</div>
<div class="icon-name">wi-direction-down-left</div>
<div class="icon_unicode">f043 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf048;</div>
<div class="icon-name">wi-direction-left</div>
<div class="icon_unicode">f048 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf087;</div>
<div class="icon-name">wi-direction-up-left</div>
<div class="icon_unicode">f087 </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Wind Degree Examples</div>
<div class="instructions">
<div class="info-icon"><i class="fa fa-info-circle"></i></div>
<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>
<div class="row">
<div class="icon-wrap"><i class="wi wi-wind towards-0-deg"></i>
<div class="icon-name">wi-wind.towards-0-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-23-deg"></i>
<div class="icon-name">wi-wind.towards-23-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-45-deg"></i>
<div class="icon-name">wi-wind.towards-45-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-68-deg"></i>
<div class="icon-name">wi-wind.towards-68-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-90-deg"></i>
<div class="icon-name">wi-wind.towards-90-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-113-deg"></i>
<div class="icon-name">wi-wind.towards-113-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-135-deg"></i>
<div class="icon-name">wi-wind.towards-135-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-158-deg"></i>
<div class="icon-name">wi-wind.towards-158-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-180-deg"></i>
<div class="icon-name">wi-wind.towards-180-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-203-deg"></i>
<div class="icon-name">wi-wind.towards-203-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-225-deg"></i>
<div class="icon-name">wi-wind.towards-225-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-248-deg"></i>
<div class="icon-name">wi-wind.towards-248-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-270-deg"></i>
<div class="icon-name">wi-wind.towards-270-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-293-deg"></i>
<div class="icon-name">wi-wind.towards-293-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-313-deg"></i>
<div class="icon-name">wi-wind.towards-313-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind towards-336-deg"></i>
<div class="icon-name">wi-wind.towards-336-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-180-deg"></i>
<div class="icon-name">wi-wind.from-180-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-203-deg"></i>
<div class="icon-name">wi-wind.from-203-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-225-deg"></i>
<div class="icon-name">wi-wind.from-225-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-248-deg"></i>
<div class="icon-name">wi-wind.from-248-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-270-deg"></i>
<div class="icon-name">wi-wind.from-270-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-293-deg"></i>
<div class="icon-name">wi-wind.from-293-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-313-deg"></i>
<div class="icon-name">wi-wind.from-313-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-336-deg"></i>
<div class="icon-name">wi-wind.from-336-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-0-deg"></i>
<div class="icon-name">wi-wind.from-0-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-23-deg"></i>
<div class="icon-name">wi-wind.from-23-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-45-deg"></i>
<div class="icon-name">wi-wind.from-45-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-68-deg"></i>
<div class="icon-name">wi-wind.from-68-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-90-deg"></i>
<div class="icon-name">wi-wind.from-90-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-113-deg"></i>
<div class="icon-name">wi-wind.from-113-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-135-deg"></i>
<div class="icon-name">wi-wind.from-135-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
<div class="icon-wrap"><i class="wi wi-wind from-158-deg"></i>
<div class="icon-name">wi-wind.from-158-deg</div>
<div class="icon_unicode">f0b1 </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Wind Cardinal Examples</div>
<div class="instructions">
<div class="info-icon"><i class="fa fa-info-circle"></i></div>
<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>
<div class="row">
<div class="icon-wrap"><i class="wi wi-wind wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-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 wi-from-nnw"></i>
<div class="icon-name">wi-from-nnw</div>
<div class="icon_unicode">f0b1 </div>
</div>
</div>
</div>
<div class="col-sm-12 icon-set">
<div class="section-title">Beaufort Wind Scale</div>
<div class="row">
<div class="icon-wrap">
<div class="icon">&#xf0b7;</div>
<div class="icon-name">wi-wind-beaufort-0</div>
<div class="icon_unicode">f0b7 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0b8;</div>
<div class="icon-name">wi-wind-beaufort-1</div>
<div class="icon_unicode">f0b8 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0b9;</div>
<div class="icon-name">wi-wind-beaufort-2</div>
<div class="icon_unicode">f0b9 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0ba;</div>
<div class="icon-name">wi-wind-beaufort-3</div>
<div class="icon_unicode">f0ba </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0bb;</div>
<div class="icon-name">wi-wind-beaufort-4</div>
<div class="icon_unicode">f0bb </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0bc;</div>
<div class="icon-name">wi-wind-beaufort-5</div>
<div class="icon_unicode">f0bc </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0bd;</div>
<div class="icon-name">wi-wind-beaufort-6</div>
<div class="icon_unicode">f0bd </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0be;</div>
<div class="icon-name">wi-wind-beaufort-7</div>
<div class="icon_unicode">f0be </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0bf;</div>
<div class="icon-name">wi-wind-beaufort-8</div>
<div class="icon_unicode">f0bf </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c0;</div>
<div class="icon-name">wi-wind-beaufort-9</div>
<div class="icon_unicode">f0c0 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c1;</div>
<div class="icon-name">wi-wind-beaufort-10</div>
<div class="icon_unicode">f0c1 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c2;</div>
<div class="icon-name">wi-wind-beaufort-11</div>
<div class="icon_unicode">f0c2 </div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf0c3;</div>
<div class="icon-name">wi-wind-beaufort-12</div>
<div class="icon_unicode">f0c3 </div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="section-title">Utility Classes</div>
<div class="instructions">
<div class="info-icon"><i class="fa fa-info-circle"></i></div>
<p>Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Flip</h3>
<p><code>wi-flip-horizontal</code></p>
<p><code>wi-flip-vertical</code></p>
</div>
<div class="col-sm-4">
<h3>Rotate</h3>
<p><code>wi-rotate-90</code></p>
<p><code>wi-rotate-180</code></p>
<p><code>wi-rotate-270</code></p>
</div>
<div class="col-sm-4">
<h3>Fixed Width</h3>
<p><code>wi-fw</code></p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<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>
</div>
<div class="col-sm-6">
<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>
</div>
</div>
<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>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink