Mirrors/erikflowers_weather-icons
2
0
Fork 0
mirror of https://github.com/erikflowers/weather-icons.git synced 2025-10-12 07:22:11 -06:00
Code Issues Releases Wiki Activity
erikflowers_weather-icons/docs/cheatsheet.html

537 lines
22 KiB
HTML
Raw Normal View History

getting the files and folder structure built
2015-07-28 11:05:33 -07:00
<!DOCTYPE html>
<html>
<head>
<title>Weather Icons - Icon Font inspired by Font Awesome and designed for Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<p>Copy and paste these characters into your design apps to use them as real fonts: </p>
<section class="content container iconExamples reference">
<div class="row">
<div class="col-sm-12">
<div class="reference">Day / Sunny</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf000; </div>
<div class="icon_name">wi-day-cloudy-gusts </div>
<div class="icon_unicode">(&#xf000;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf001; </div>
<div class="icon_name">wi-day-cloudy-windy </div>
<div class="icon_unicode">(&#xf001;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf002; </div>
<div class="icon_name">wi-day-cloudy </div>
<div class="icon_unicode">(&#xf002;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf003; </div>
<div class="icon_name">wi-day-fog </div>
<div class="icon_unicode">(&#xf003;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf004; </div>
<div class="icon_name">wi-day-hail </div>
<div class="icon_unicode">(&#xf004;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf005; </div>
<div class="icon_name">wi-day-lightning </div>
<div class="icon_unicode">(&#xf005;)</div>
</div>
</div>
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf006; </div>
<div class="icon_name">wi-day-rain-mix </div>
<div class="icon_unicode">(&#xf006;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf007; </div>
<div class="icon_name">wi-day-rain-wind </div>
<div class="icon_unicode">(&#xf007;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf008; </div>
<div class="icon_name">wi-day-rain </div>
<div class="icon_unicode">(&#xf008;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf009; </div>
<div class="icon_name">wi-day-showers </div>
<div class="icon_unicode">(&#xf009;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf00a; </div>
<div class="icon_name">wi-day-snow </div>
<div class="icon_unicode">(&#xf001;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf00b; </div>
<div class="icon_name">wi-day-sprinkle </div>
<div class="icon_unicode">(&#xf00b;)</div>
</div>
</div>
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf00c; </div>
<div class="icon_name">wi-day-sunny-overcast </div>
<div class="icon_unicode">(&#xf00c;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf00d; </div>
<div class="icon_name">wi-day-sunny </div>
<div class="icon_unicode">(&#xf00d;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf00e; </div>
<div class="icon_name">wi-day-storm-showers </div>
<div class="icon_unicode">(&#xf00e;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf010; </div>
<div class="icon_name">wi-day-thunderstorm </div>
<div class="icon_unicode">(&#xf010;)</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="reference">Neutral / Cloudy</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf011; </div>
<div class="icon_name">wi-cloudy-gusts </div>
<div class="icon_unicode">(&#xf011;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf012; </div>
<div class="icon_name">wi-cloudy-windy </div>
<div class="icon_unicode">(&#xf012;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf013; </div>
<div class="icon_name">wi-cloudy </div>
<div class="icon_unicode">(&#xf013;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf014; </div>
<div class="icon_name">wi-fog </div>
<div class="icon_unicode">(&#xf014;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf015; </div>
<div class="icon_name">wi-hail </div>
<div class="icon_unicode">(&#xf015;)</div>
</div>
</div>
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf016; </div>
<div class="icon_name">wi-lightning </div>
<div class="icon_unicode">(&#xf016;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf017; </div>
<div class="icon_name">wi-rain-mix </div>
<div class="icon_unicode">(&#xf017;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf018; </div>
<div class="icon_name">wi-rain-wind </div>
<div class="icon_unicode">(&#xf018;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf019; </div>
<div class="icon_name">wi-rain </div>
<div class="icon_unicode">(&#xf019;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01a; </div>
<div class="icon_name">wi-showers </div>
<div class="icon_unicode">(&#xf01a;)</div>
</div>
</div>
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf01b; </div>
<div class="icon_name">wi-snow </div>
<div class="icon_unicode">(&#xf01b;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01c; </div>
<div class="icon_name">wi-sprinkle </div>
<div class="icon_unicode">(&#xf01c;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01d; </div>
<div class="icon_name">wi-storm-showers </div>
<div class="icon_unicode">(&#xf01d;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf01e; </div>
<div class="icon_name">wi-thunderstorm </div>
<div class="icon_unicode">(&#xf01e;)</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="reference">Night / Moons</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf022; </div>
<div class="icon_name">wi-night-alt-cloudy-gusts </div>
<div class="icon_unicode">(&#xf022;)</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">(&#xf023;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf024; </div>
<div class="icon_name">wi-night-alt-hail </div>
<div class="icon_unicode">(&#xf024;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf025; </div>
<div class="icon_name">wi-night-alt-lightning </div>
<div class="icon_unicode">(&#xf025;)</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">(&#xf026;)</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">(&#xf027;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf028; </div>
<div class="icon_name">wi-night-alt-rain </div>
<div class="icon_unicode">(&#xf028;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf029; </div>
<div class="icon_name">wi-night-alt-showers </div>
<div class="icon_unicode">(&#xf029;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf02a; </div>
<div class="icon_name">wi-night-alt-snow </div>
</div>
</div>
<div class="icon_unicode">(&#xf02a;)</div>
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf02b; </div>
<div class="icon_name">wi-night-alt-sprinkle </div>
<div class="icon_unicode">(&#xf02b;)</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">(&#xf02c;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf02d; </div>
<div class="icon_name">wi-night-alt-thunderstorm </div>
<div class="icon_unicode">(&#xf02d;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf02e; </div>
<div class="icon_name">wi-night-clear </div>
<div class="icon_unicode">(&#xf02e;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf02f; </div>
<div class="icon_name">wi-night-cloudy-gusts </div>
<div class="icon_unicode">(&#xf02f;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf030; </div>
<div class="icon_name">wi-night-cloudy-windy </div>
<div class="icon_unicode">(&#xf030;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf031; </div>
<div class="icon_name">wi-night-cloudy </div>
<div class="icon_unicode">(&#xf031;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf032; </div>
<div class="icon_name">wi-night-hail </div>
<div class="icon_unicode">(&#xf032;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf033; </div>
<div class="icon_name">wi-night-lightning </div>
<div class="icon_unicode">(&#xf033;)</div>
</div>
</div>
<div class="col-sm-4">
<div class="icon-wrap"></div>
<div class="right">
<div class="icon">&#xf034; </div>
<div class="icon_name">wi-night-rain-mix </div>
<div class="icon_unicode">(&#xf034;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf035; </div>
<div class="icon_name">wi-night-rain-wind </div>
<div class="icon_unicode">(&#xf035;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf036; </div>
<div class="icon_name">wi-night-rain </div>
<div class="icon_unicode">(&#xf036;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf037; </div>
<div class="icon_name">wi-night-showers </div>
<div class="icon_unicode">(&#xf037;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf038; </div>
<div class="icon_name">wi-night-snow </div>
<div class="icon_unicode">(&#xf038;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf039; </div>
<div class="icon_name">wi-night-sprinkle </div>
<div class="icon_unicode">(&#xf039;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03a; </div>
<div class="icon_name">wi-night-storm-showers </div>
<div class="icon_unicode">(&#xf03a;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03b; </div>
<div class="icon_name">wi-night-thunderstorm </div>
<div class="icon_unicode">(&#xf03b;)</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="reference">Miscellaneous Weather </div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf03c; </div>
<div class="icon_name">wi-celcius </div>
<div class="icon_unicode">(&#xf03c;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03d; </div>
<div class="icon_name">wi-cloud-down </div>
<div class="icon_unicode">(&#xf03d;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf03e; </div>
<div class="icon_name">wi-cloud-refresh </div>
<div class="icon_unicode">(&#xf03e;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf040; </div>
<div class="icon_name">wi-cloud-up </div>
<div class="icon_unicode">(&#xf040;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf041; </div>
<div class="icon_name">wi-cloud </div>
<div class="icon_unicode">(&#xf041;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf042; </div>
<div class="icon_name">wi-degrees </div>
<div class="icon_unicode">(&#xf042;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf043; </div>
<div class="icon_name">wi-down-left </div>
<div class="icon_unicode">(&#xf043;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf044; </div>
<div class="icon_name">wi-down </div>
<div class="icon_unicode">(&#xf044;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf045; </div>
<div class="icon_name">wi-fahrenheit </div>
<div class="icon_unicode">(&#xf045;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf046; </div>
<div class="icon_name">wi-horizon-alt </div>
<div class="icon_unicode">(&#xf046;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf047; </div>
<div class="icon_name">wi-horizon </div>
<div class="icon_unicode">(&#xf047;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf048; </div>
<div class="icon_name">wi-left </div>
<div class="icon_unicode">(&#xf048;)</div>
</div>
</div>
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf016; </div>
<div class="icon_name">wi-lightning </div>
<div class="icon_unicode">(&#xf016;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04a; </div>
<div class="icon_name">wi-night-fog </div>
<div class="icon_unicode">(&#xf04a;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04b; </div>
<div class="icon_name">wi-refresh-alt </div>
<div class="icon_unicode">(&#xf04b;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04c; </div>
<div class="icon_name">wi-refresh </div>
<div class="icon_unicode">(&#xf04c;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04d; </div>
<div class="icon_name">wi-right </div>
<div class="icon_unicode">(&#xf04d;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf04e; </div>
<div class="icon_name">wi-sprinkles </div>
<div class="icon_unicode">(&#xf04e;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf050; </div>
<div class="icon_name">wi-strong-wind </div>
<div class="icon_unicode">(&#xf050;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf051; </div>
<div class="icon_name">wi-sunrise </div>
<div class="icon_unicode">(&#xf051;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf052; </div>
<div class="icon_name">wi-sunset </div>
<div class="icon_unicode">(&#xf052;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf053; </div>
<div class="icon_name">wi-thermometer-exterior </div>
<div class="icon_unicode">(&#xf053;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf054; </div>
<div class="icon_name">wi-thermometer-internal </div>
<div class="icon_unicode">(&#xf054;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf055; </div>
<div class="icon_name">wi-thermometer </div>
<div class="icon_unicode">(&#xf055;)</div>
</div>
</div>
<div class="col-sm-4">
<div class="icon-wrap">
<div class="icon">&#xf056; </div>
<div class="icon_name">wi-tornado </div>
<div class="icon_unicode">(&#xf056;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf057; </div>
<div class="icon_name">wi-up-right </div>
<div class="icon_unicode">(&#xf057;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf058; </div>
<div class="icon_name">wi-up </div>
<div class="icon_unicode">(&#xf058;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf059; </div>
<div class="icon_name">wi-wind-east </div>
<div class="icon_unicode">(&#xf059;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf05a; </div>
<div class="icon_name">wi-wind-north-east </div>
<div class="icon_unicode">(&#xf05a;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf05b; </div>
<div class="icon_name">wi-wind-north-west </div>
<div class="icon_unicode">(&#xf05b;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf05c; </div>
<div class="icon_name">wi-wind-north </div>
<div class="icon_unicode">(&#xf05c;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf05d; </div>
<div class="icon_name">wi-wind-south-east </div>
<div class="icon_unicode">(&#xf05d;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf05e; </div>
<div class="icon_name">wi-wind-south-west </div>
<div class="icon_unicode">(&#xf05e;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf060; </div>
<div class="icon_name">wi-wind-south </div>
<div class="icon_unicode">(&#xf060;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf061; </div>
<div class="icon_name">wi-wind-west </div>
<div class="icon_unicode">(&#xf061;)</div>
</div>
<div class="icon-wrap">
<div class="icon">&#xf021; </div>
<div class="icon_name">wi-windy </div>
<div class="icon_unicode">(&#xf021;) </div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row-fluid">
<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> &mdash; Code licensed under <a http://opensource.org/licenses/mit-license.html>MIT License</a> &mdash; Documentation licensed under <a http://creativecommons.org/licenses/by/3.0/>CC BY 3.0</a></p>
</div>
</div>
</div>
</footer>
</body>
</html>
Reference in New Issue Copy Permalink