Mirrors/erikflowers_weather-icons
2
0
Fork 0
mirror of https://github.com/erikflowers/weather-icons.git synced 2025-10-11 23:12:12 -06:00
Code Issues Releases Wiki Activity
erikflowers_weather-icons/docs/cheatsheet.html
Erik R. Flowers 582caed9e7 getting the files and folder structure built
2015-07-28 11:05:33 -07:00

537 lines
22 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 View Git Blame Copy Permalink