Mirrors/erikflowers_weather-icons
2
0
Fork 0
mirror of https://github.com/erikflowers/weather-icons.git synced 2025-10-12 15:32:13 -06:00
Code Issues Releases Wiki Activity

creating the Less loop for the class names

Browse Source
This commit is contained in:
Erik Flowers 2015-07-28 22:41:26 -07:00
parent 42292c5da5
commit 8e71af06c2
11 changed files with 1327 additions and 2078 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

542
css/weather-icons-sass.css
View File

@ -9,7 +9,7 @@
* *
* License * License
* ------------------------------------------------------------------------------ * ------------------------------------------------------------------------------
* - Fpmt licensed under SIL OFL 1.1 - * - Font licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL * http://scripts.sil.org/OFL
* - CSS and LESS are licensed under MIT License - * - CSS and LESS are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html * http://opensource.org/licenses/mit-license.html
@ -28,8 +28,7 @@
src: url("../font/weathericons-regular-webfont.eot"); src: url("../font/weathericons-regular-webfont.eot");
src: url("../font/weathericons-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../font/weathericons-regular-webfont.woff") format("woff"), url("../font/weathericons-regular-webfont.ttf") format("truetype"), url("../font/weathericons-regular-webfont.svg#weathericons-regular-webfontRg") format("svg"); src: url("../font/weathericons-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../font/weathericons-regular-webfont.woff") format("woff"), url("../font/weathericons-regular-webfont.ttf") format("truetype"), url("../font/weathericons-regular-webfont.svg#weathericons-regular-webfontRg") format("svg");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal; }
}
.wi { .wi {
display: inline-block; display: inline-block;
font-family: "weathericons"; font-family: "weathericons";
@ -37,717 +36,538 @@
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale; }
}
.wi-day-cloudy-gusts:before { .wi-day-cloudy-gusts:before {
content: ""; content: ""; }
}
.wi-day-cloudy-windy:before { .wi-day-cloudy-windy:before {
content: ""; content: ""; }
}
.wi-day-cloudy:before { .wi-day-cloudy:before {
content: ""; content: ""; }
}
.wi-day-fog:before { .wi-day-fog:before {
content: ""; content: ""; }
}
.wi-day-hail:before { .wi-day-hail:before {
content: ""; content: ""; }
}
.wi-day-lightning:before { .wi-day-lightning:before {
content: ""; content: ""; }
}
.wi-day-rain-mix:before { .wi-day-rain-mix:before {
content: ""; content: ""; }
}
.wi-day-rain-wind:before { .wi-day-rain-wind:before {
content: ""; content: ""; }
}
.wi-day-rain:before { .wi-day-rain:before {
content: ""; content: ""; }
}
.wi-day-showers:before { .wi-day-showers:before {
content: ""; content: ""; }
}
.wi-day-snow:before { .wi-day-snow:before {
content: ""; content: ""; }
}
.wi-day-sprinkle:before { .wi-day-sprinkle:before {
content: ""; content: ""; }
}
.wi-day-sunny-overcast:before { .wi-day-sunny-overcast:before {
content: ""; content: ""; }
}
.wi-day-sunny:before { .wi-day-sunny:before {
content: ""; content: ""; }
}
.wi-day-storm-showers:before { .wi-day-storm-showers:before {
content: ""; content: ""; }
}
.wi-day-thunderstorm:before { .wi-day-thunderstorm:before {
content: ""; content: ""; }
}
.wi-cloudy-gusts:before { .wi-cloudy-gusts:before {
content: ""; content: ""; }
}
.wi-cloudy-windy:before { .wi-cloudy-windy:before {
content: ""; content: ""; }
}
.wi-cloudy:before { .wi-cloudy:before {
content: ""; content: ""; }
}
.wi-fog:before { .wi-fog:before {
content: ""; content: ""; }
}
.wi-hail:before { .wi-hail:before {
content: ""; content: ""; }
}
.wi-lightning:before { .wi-lightning:before {
content: ""; content: ""; }
}
.wi-rain-mix:before { .wi-rain-mix:before {
content: ""; content: ""; }
}
.wi-rain-wind:before { .wi-rain-wind:before {
content: ""; content: ""; }
}
.wi-rain:before { .wi-rain:before {
content: ""; content: ""; }
}
.wi-showers:before { .wi-showers:before {
content: ""; content: ""; }
}
.wi-snow:before { .wi-snow:before {
content: ""; content: ""; }
}
.wi-sprinkle:before { .wi-sprinkle:before {
content: ""; content: ""; }
}
.wi-storm-showers:before { .wi-storm-showers:before {
content: ""; content: ""; }
}
.wi-thunderstorm:before { .wi-thunderstorm:before {
content: ""; content: ""; }
}
.wi-windy:before { .wi-windy:before {
content: ""; content: ""; }
}
.wi-night-alt-cloudy-gusts:before { .wi-night-alt-cloudy-gusts:before {
content: ""; content: ""; }
}
.wi-night-alt-cloudy-windy:before { .wi-night-alt-cloudy-windy:before {
content: ""; content: ""; }
}
.wi-night-alt-hail:before { .wi-night-alt-hail:before {
content: ""; content: ""; }
}
.wi-night-alt-lightning:before { .wi-night-alt-lightning:before {
content: ""; content: ""; }
}
.wi-night-alt-rain-mix:before { .wi-night-alt-rain-mix:before {
content: ""; content: ""; }
}
.wi-night-alt-rain-wind:before { .wi-night-alt-rain-wind:before {
content: ""; content: ""; }
}
.wi-night-alt-rain:before { .wi-night-alt-rain:before {
content: ""; content: ""; }
}
.wi-night-alt-showers:before { .wi-night-alt-showers:before {
content: ""; content: ""; }
}
.wi-night-alt-snow:before { .wi-night-alt-snow:before {
content: ""; content: ""; }
}
.wi-night-alt-sprinkle:before { .wi-night-alt-sprinkle:before {
content: ""; content: ""; }
}
.wi-night-alt-storm-showers:before { .wi-night-alt-storm-showers:before {
content: ""; content: ""; }
}
.wi-night-alt-thunderstorm:before { .wi-night-alt-thunderstorm:before {
content: ""; content: ""; }
}
.wi-night-clear:before { .wi-night-clear:before {
content: ""; content: ""; }
}
.wi-night-cloudy-gusts:before { .wi-night-cloudy-gusts:before {
content: ""; content: ""; }
}
.wi-night-cloudy-windy:before { .wi-night-cloudy-windy:before {
content: ""; content: ""; }
}
.wi-night-cloudy:before { .wi-night-cloudy:before {
content: ""; content: ""; }
}
.wi-night-hail:before { .wi-night-hail:before {
content: ""; content: ""; }
}
.wi-night-lightning:before { .wi-night-lightning:before {
content: ""; content: ""; }
}
.wi-night-rain-mix:before { .wi-night-rain-mix:before {
content: ""; content: ""; }
}
.wi-night-rain-wind:before { .wi-night-rain-wind:before {
content: ""; content: ""; }
}
.wi-night-rain:before { .wi-night-rain:before {
content: ""; content: ""; }
}
.wi-night-showers:before { .wi-night-showers:before {
content: ""; content: ""; }
}
.wi-night-snow:before { .wi-night-snow:before {
content: ""; content: ""; }
}
.wi-night-sprinkle:before { .wi-night-sprinkle:before {
content: ""; content: ""; }
}
.wi-night-storm-showers:before { .wi-night-storm-showers:before {
content: ""; content: ""; }
}
.wi-night-thunderstorm:before { .wi-night-thunderstorm:before {
content: ""; content: ""; }
}
.wi-celsius:before { .wi-celsius:before {
content: ""; content: ""; }
}
.wi-cloud-down:before { .wi-cloud-down:before {
content: ""; content: ""; }
}
.wi-cloud-refresh:before { .wi-cloud-refresh:before {
content: ""; content: ""; }
}
.wi-cloud-up:before { .wi-cloud-up:before {
content: ""; content: ""; }
}
.wi-cloud:before { .wi-cloud:before {
content: ""; content: ""; }
}
.wi-degrees:before { .wi-degrees:before {
content: ""; content: ""; }
}
.wi-down-left:before { .wi-down-left:before {
content: ""; content: ""; }
}
.wi-down:before { .wi-down:before {
content: ""; content: ""; }
}
.wi-fahrenheit:before { .wi-fahrenheit:before {
content: ""; content: ""; }
}
.wi-horizon-alt:before { .wi-horizon-alt:before {
content: ""; content: ""; }
}
.wi-horizon:before { .wi-horizon:before {
content: ""; content: ""; }
}
.wi-left:before { .wi-left:before {
content: ""; content: ""; }
}
.wi-_reserved_:before { .wi-_reserved_:before {
content: ""; content: ""; }
}
.wi-night-fog:before { .wi-night-fog:before {
content: ""; content: ""; }
}
.wi-refresh-alt:before { .wi-refresh-alt:before {
content: ""; content: ""; }
}
.wi-refresh:before { .wi-refresh:before {
content: ""; content: ""; }
}
.wi-right:before { .wi-right:before {
content: ""; content: ""; }
}
.wi-sprinkles:before { .wi-sprinkles:before {
content: ""; content: ""; }
}
.wi-strong-wind:before { .wi-strong-wind:before {
content: ""; content: ""; }
}
.wi-sunrise:before { .wi-sunrise:before {
content: ""; content: ""; }
}
.wi-sunset:before { .wi-sunset:before {
content: ""; content: ""; }
}
.wi-thermometer-exterior:before { .wi-thermometer-exterior:before {
content: ""; content: ""; }
}
.wi-thermometer-internal:before { .wi-thermometer-internal:before {
content: ""; content: ""; }
}
.wi-thermometer:before { .wi-thermometer:before {
content: ""; content: ""; }
}
.wi-tornado:before { .wi-tornado:before {
content: ""; content: ""; }
}
.wi-up-right:before { .wi-up-right:before {
content: ""; content: ""; }
}
.wi-up:before { .wi-up:before {
content: ""; content: ""; }
}
.wi-wind-west:before { .wi-wind-west:before {
content: ""; content: ""; }
}
.wi-wind-south-west:before { .wi-wind-south-west:before {
content: ""; content: ""; }
}
.wi-wind-south-east:before { .wi-wind-south-east:before {
content: ""; content: ""; }
}
.wi-wind-south:before { .wi-wind-south:before {
content: ""; content: ""; }
}
.wi-wind-north-west:before { .wi-wind-north-west:before {
content: ""; content: ""; }
}
.wi-wind-north-east:before { .wi-wind-north-east:before {
content: ""; content: ""; }
}
.wi-wind-north:before { .wi-wind-north:before {
content: ""; content: ""; }
}
.wi-wind-east:before { .wi-wind-east:before {
content: ""; content: ""; }
}
.wi-smoke:before { .wi-smoke:before {
content: ""; content: ""; }
}
.wi-dust:before { .wi-dust:before {
content: ""; content: ""; }
}
.wi-snow-wind:before { .wi-snow-wind:before {
content: ""; content: ""; }
}
.wi-day-snow-wind:before { .wi-day-snow-wind:before {
content: ""; content: ""; }
}
.wi-night-snow-wind:before { .wi-night-snow-wind:before {
content: ""; content: ""; }
}
.wi-night-alt-snow-wind:before { .wi-night-alt-snow-wind:before {
content: ""; content: ""; }
}
.wi-day-sleet-storm:before { .wi-day-sleet-storm:before {
content: ""; content: ""; }
}
.wi-night-sleet-storm:before { .wi-night-sleet-storm:before {
content: ""; content: ""; }
}
.wi-night-alt-sleet-storm:before { .wi-night-alt-sleet-storm:before {
content: ""; content: ""; }
}
.wi-day-snow-thunderstorm:before { .wi-day-snow-thunderstorm:before {
content: ""; content: ""; }
}
.wi-night-snow-thunderstorm:before { .wi-night-snow-thunderstorm:before {
content: ""; content: ""; }
}
.wi-night-alt-snow-thunderstorm:before { .wi-night-alt-snow-thunderstorm:before {
content: ""; content: ""; }
}
.wi-solar-eclipse:before { .wi-solar-eclipse:before {
content: ""; content: ""; }
}
.wi-lunar-eclipse:before { .wi-lunar-eclipse:before {
content: ""; content: ""; }
}
.wi-meteor:before { .wi-meteor:before {
content: ""; content: ""; }
}
.wi-hot:before { .wi-hot:before {
content: ""; content: ""; }
}
.wi-hurricane:before { .wi-hurricane:before {
content: ""; content: ""; }
}
.wi-smog:before { .wi-smog:before {
content: ""; content: ""; }
}
.wi-alien:before { .wi-alien:before {
content: ""; content: ""; }
}
.wi-snowflake-cold:before { .wi-snowflake-cold:before {
content: ""; content: ""; }
}
.wi-stars:before { .wi-stars:before {
content: ""; content: ""; }
}
.wi-night-partly-cloudy:before { .wi-night-partly-cloudy:before {
content: ""; content: ""; }
}
.wi-umbrella:before { .wi-umbrella:before {
content: ""; content: ""; }
}
.wi-day-windy:before { .wi-day-windy:before {
content: ""; content: ""; }
}
.wi-night-alt-cloudy:before { .wi-night-alt-cloudy:before {
content: ""; content: ""; }
}
.wi-up-left:before { .wi-up-left:before {
content: ""; content: ""; }
}
.wi-down-right:before { .wi-down-right:before {
content: ""; content: ""; }
}
.wi-time-12:before { .wi-time-12:before {
content: ""; content: ""; }
}
.wi-time-1:before { .wi-time-1:before {
content: ""; content: ""; }
}
.wi-time-2:before { .wi-time-2:before {
content: ""; content: ""; }
}
.wi-time-3:before { .wi-time-3:before {
content: ""; content: ""; }
}
.wi-time-4:before { .wi-time-4:before {
content: ""; content: ""; }
}
.wi-time-5:before { .wi-time-5:before {
content: ""; content: ""; }
}
.wi-time-6:before { .wi-time-6:before {
content: ""; content: ""; }
}
.wi-time-7:before { .wi-time-7:before {
content: ""; content: ""; }
}
.wi-time-8:before { .wi-time-8:before {
content: ""; content: ""; }
}
.wi-time-9:before { .wi-time-9:before {
content: ""; content: ""; }
}
.wi-time-10:before { .wi-time-10:before {
content: ""; content: ""; }
}
.wi-time-11:before { .wi-time-11:before {
content: ""; content: ""; }
}
.wi-moon-new:before { .wi-moon-new:before {
content: ""; content: ""; }
}
.wi-moon-waxing-cresent-1:before { .wi-moon-waxing-cresent-1:before {
content: ""; content: ""; }
}
.wi-moon-waxing-cresent-2:before { .wi-moon-waxing-cresent-2:before {
content: ""; content: ""; }
}
.wi-moon-waxing-cresent-3:before { .wi-moon-waxing-cresent-3:before {
content: ""; content: ""; }
}
.wi-moon-waxing-cresent-4:before { .wi-moon-waxing-cresent-4:before {
content: ""; content: ""; }
}
.wi-moon-waxing-cresent-5:before { .wi-moon-waxing-cresent-5:before {
content: ""; content: ""; }
}
.wi-moon-waxing-cresent-6:before { .wi-moon-waxing-cresent-6:before {
content: ""; content: ""; }
}
.wi-moon-first-quarter:before { .wi-moon-first-quarter:before {
content: ""; content: ""; }
}
.wi-moon-waxing-gibbous-1:before { .wi-moon-waxing-gibbous-1:before {
content: ""; content: ""; }
}
.wi-moon-waxing-gibbous-2:before { .wi-moon-waxing-gibbous-2:before {
content: ""; content: ""; }
}
.wi-moon-waxing-gibbous-3:before { .wi-moon-waxing-gibbous-3:before {
content: ""; content: ""; }
}
.wi-moon-waxing-gibbous-4:before { .wi-moon-waxing-gibbous-4:before {
content: ""; content: ""; }
}
.wi-moon-waxing-gibbous-5:before { .wi-moon-waxing-gibbous-5:before {
content: ""; content: ""; }
}
.wi-moon-waxing-gibbous-6:before { .wi-moon-waxing-gibbous-6:before {
content: ""; content: ""; }
}
.wi-moon-full:before { .wi-moon-full:before {
content: ""; content: ""; }
}
.wi-moon-waning-gibbous-1:before { .wi-moon-waning-gibbous-1:before {
content: ""; content: ""; }
}
.wi-moon-waning-gibbous-2:before { .wi-moon-waning-gibbous-2:before {
content: ""; content: ""; }
}
.wi-moon-waning-gibbous-3:before { .wi-moon-waning-gibbous-3:before {
content: ""; content: ""; }
}
.wi-moon-waning-gibbous-4:before { .wi-moon-waning-gibbous-4:before {
content: ""; content: ""; }
}
.wi-moon-waning-gibbous-5:before { .wi-moon-waning-gibbous-5:before {
content: ""; content: ""; }
}
.wi-moon-waning-gibbous-6:before { .wi-moon-waning-gibbous-6:before {
content: ""; content: ""; }
}
.wi-moon-3rd-quarter:before { .wi-moon-3rd-quarter:before {
content: ""; content: ""; }
}
.wi-moon-waning-crescent-1:before { .wi-moon-waning-crescent-1:before {
content: ""; content: ""; }
}
.wi-moon-waning-crescent-2:before { .wi-moon-waning-crescent-2:before {
content: ""; content: ""; }
}
.wi-moon-waning-crescent-3:before { .wi-moon-waning-crescent-3:before {
content: ""; content: ""; }
}
.wi-moon-waning-crescent-4:before { .wi-moon-waning-crescent-4:before {
content: ""; content: ""; }
}
.wi-moon-waning-crescent-5:before { .wi-moon-waning-crescent-5:before {
content: ""; content: ""; }
}
.wi-moon-waning-crescent-6:before { .wi-moon-waning-crescent-6:before {
content: ""; content: ""; }
}
.wi-wind-default:before { .wi-wind-default:before {
content: ""; content: ""; }
}
.wi-day-sleet:before { .wi-day-sleet:before {
content: ""; content: ""; }
}
.wi-night-sleet:before { .wi-night-sleet:before {
content: ""; content: ""; }
}
.wi-night-alt-sleet:before { .wi-night-alt-sleet:before {
content: ""; content: ""; }
}
.wi-sleet:before { .wi-sleet:before {
content: ""; content: ""; }
}
.wi-day-haze:before { .wi-day-haze:before {
content: ""; content: ""; }
}
.wi-beafort-0:before { .wi-beafort-0:before {
content: ""; content: ""; }
}
.wi-beafort-1:before { .wi-beafort-1:before {
content: ""; content: ""; }
}
.wi-beafort-2:before { .wi-beafort-2:before {
content: ""; content: ""; }
}
.wi-beafort-3:before { .wi-beafort-3:before {
content: ""; content: ""; }
}
.wi-beafort-4:before { .wi-beafort-4:before {
content: ""; content: ""; }
}
.wi-beafort-5:before { .wi-beafort-5:before {
content: ""; content: ""; }
}
.wi-beafort-6:before { .wi-beafort-6:before {
content: ""; content: ""; }
}
.wi-beafort-7:before { .wi-beafort-7:before {
content: ""; content: ""; }
}
.wi-beafort-8:before { .wi-beafort-8:before {
content: ""; content: ""; }
}
.wi-beafort-9:before { .wi-beafort-9:before {
content: ""; content: ""; }
}
.wi-beafort-10:before { .wi-beafort-10:before {
content: ""; content: ""; }
}
.wi-beafort-11:before { .wi-beafort-11:before {
content: ""; content: ""; }
}
.wi-beafort-12:before { .wi-beafort-12:before {
content: ""; content: ""; }
}

846
css/weather-icons.css
View File

File diff suppressed because it is too large Load Diff

844
css/weather-icons.min.css vendored
View File

File diff suppressed because it is too large Load Diff

240
docs/index.html
View File

@ -2,13 +2,13 @@
<html> <html>
<head> <head>
<title>Weather Icons - 189 Icon Font inspired by Font Awesome and designed for Bootstrap</title> <title>Weather Icons - 189 Icon Font inspired by Font Awesome and designed for Bootstrap</title>
<!-- favicons --> <!-- favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-touch-icon-60x60.png">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileColor" content="#da532c">
<!--favicons --> <!--favicons-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
@ -18,7 +18,7 @@
</script> </script>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="../css/weather-icons-sass.css"> <link rel="stylesheet" href="../css/weather-icons.css">
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (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), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@ -44,10 +44,10 @@
<section class="content container intro"> <section class="content container intro">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<p 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-sprinkles"> </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></p> <p 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-sprinkles"></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></p>
<p class="headline">Weather Icons is a font of 189 weather themed icons, ready to be dropped right into <a href="http://getbootstrap.com">Bootstrap</a> or any other project. <i class="wi wi-cloudy"> </i></p> <p class="headline">Weather Icons is a font of 189 weather themed icons, ready to be dropped right into<a href="http://getbootstrap.com">Bootstrap</a> or any other project.<i class="wi wi-cloudy"></i></p>
<p>Inspired by <a href="http://fontawesome.io/"> Font Awesome</a>, they work in essentially the same way. They are infinitley scalable and any CSS that can be applied to text can be applied to them. All you need to do to insert an icon is add the class to an "i" element: <code>&lt;i class="wi wi-day-lightning"&gt;&lt;/i&gt;</code></p> <p>Inspired by<a href="http://fontawesome.io/"> Font Awesome</a>, they work in essentially the same way. They are infinitley scalable and any CSS that can be applied to text can be applied to them. All you need to do to insert an icon is add the class to an "i" element:<code>&lt;i class="wi wi-day-lightning"&gt;&lt;/i&gt;</code></p>
<p>Please make requests or report any issues to the <a href="https://github.com/erikflowers/weather-icons/issues">main repository.</a></p> <p> Please make requests or report any issues to the<a href="https://github.com/erikflowers/weather-icons/issues">main repository.</a></p>
<p class="follow"><a href="https://twitter.com/weathericons" data-show-count="false" data-size="large" data-dnt="true" class="twitter-follow-button">Follow @weathericons</a> <p class="follow"><a href="https://twitter.com/weathericons" data-show-count="false" data-size="large" data-dnt="true" class="twitter-follow-button">Follow @weathericons</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</p> </p>
@ -57,7 +57,7 @@
<div class="download-share"> <div class="download-share">
<div class="container"> <div class="container">
<div class="row download-here"> <div class="row download-here">
<div class="download-button"><a href="https://github.com/erikflowers/weather-icons" class="download btn btn-primary btn-large">Download version 1.3 <i class="wi wi-cloud"></i></a></div> <div class="download-button"><a href="https://github.com/erikflowers/weather-icons" class="download btn btn-primary btn-large">Download version 1.3<i class="wi wi-cloud"></i></a></div>
</div> </div>
<div class="row social"> <div class="row social">
<div class="col-sm-12"> <div class="col-sm-12">
@ -85,173 +85,173 @@
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-umbrella"> </i></div> <div class="icon"><i class="wi wi-umbrella"></i></div>
<div class="class">wi-umbrella </div> <div class="class">wi-umbrella</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-day-windy"> </i></div> <div class="icon"><i class="wi wi-day-windy"></i></div>
<div class="class">wi-day-windy </div> <div class="class">wi-day-windy</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-night-alt-cloudy"></i></div> <div class="icon"><i class="wi wi-night-alt-cloudy"></i></div>
<div class="class">wi-night-alt-cloudy</div> <div class="class">wi-night-alt-cloudy</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-up-left"> </i></div> <div class="icon"><i class="wi wi-up-left"></i></div>
<div class="class">wi-up-left </div> <div class="class">wi-up-left</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-down-right"> </i></div> <div class="icon"><i class="wi wi-down-right"></i></div>
<div class="class">wi-down-right </div> <div class="class">wi-down-right</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-day-sleet"> </i></div> <div class="icon"><i class="wi wi-day-sleet"></i></div>
<div class="class">wi-day-sleet </div> <div class="class">wi-day-sleet</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-night-sleet"> </i></div> <div class="icon"><i class="wi wi-night-sleet"></i></div>
<div class="class">wi-night-sleet </div> <div class="class">wi-night-sleet</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-night-alt-sleet"> </i></div> <div class="icon"><i class="wi wi-night-alt-sleet"></i></div>
<div class="class">wi-night-alt-sleet </div> <div class="class">wi-night-alt-sleet</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-sleet"> </i></div> <div class="icon"><i class="wi wi-sleet"></i></div>
<div class="class">wi-sleet </div> <div class="class">wi-sleet</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-day-haze"> </i></div> <div class="icon"><i class="wi wi-day-haze"></i></div>
<div class="class">wi-day-haze </div> <div class="class">wi-day-haze</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h3>Moon Phases </h3> <h3>Moon Phases</h3>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-new"> </i></div> <div class="icon"><i class="wi wi-moon-new"></i></div>
<div class="class">wi-moon-new </div> <div class="class">wi-moon-new</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-cresent-1"></i></div> <div class="icon"><i class="wi wi-moon-waxing-cresent-1"></i></div>
<div class="class">wi-moon-waxing-cresent-1 </div> <div class="class">wi-moon-waxing-cresent-1</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-cresent-2"></i></div> <div class="icon"><i class="wi wi-moon-waxing-cresent-2"></i></div>
<div class="class">wi-moon-waxing-cresent-2 </div> <div class="class">wi-moon-waxing-cresent-2</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-cresent-3"></i></div> <div class="icon"><i class="wi wi-moon-waxing-cresent-3"></i></div>
<div class="class">wi-moon-waxing-cresent-3 </div> <div class="class">wi-moon-waxing-cresent-3</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-cresent-4"></i></div> <div class="icon"><i class="wi wi-moon-waxing-cresent-4"></i></div>
<div class="class">wi-moon-waxing-cresent-4 </div> <div class="class">wi-moon-waxing-cresent-4</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-cresent-5"></i></div> <div class="icon"><i class="wi wi-moon-waxing-cresent-5"></i></div>
<div class="class">wi-moon-waxing-cresent-5 </div> <div class="class">wi-moon-waxing-cresent-5</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-cresent-6"></i></div> <div class="icon"><i class="wi wi-moon-waxing-cresent-6"></i></div>
<div class="class">wi-moon-waxing-cresent-6 </div> <div class="class">wi-moon-waxing-cresent-6</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-first-quarter"> </i></div> <div class="icon"><i class="wi wi-moon-first-quarter"></i></div>
<div class="class">wi-moon-first-quarter </div> <div class="class">wi-moon-first-quarter</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-gibbous-1"></i></div> <div class="icon"><i class="wi wi-moon-waxing-gibbous-1"></i></div>
<div class="class">wi-moon-waxing-gibbous-1 </div> <div class="class">wi-moon-waxing-gibbous-1</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-gibbous-2"></i></div> <div class="icon"><i class="wi wi-moon-waxing-gibbous-2"></i></div>
<div class="class">wi-moon-waxing-gibbous-2 </div> <div class="class">wi-moon-waxing-gibbous-2</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-gibbous-3"></i></div> <div class="icon"><i class="wi wi-moon-waxing-gibbous-3"></i></div>
<div class="class">wi-moon-waxing-gibbous-3 </div> <div class="class">wi-moon-waxing-gibbous-3</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-gibbous-4"></i></div> <div class="icon"><i class="wi wi-moon-waxing-gibbous-4"></i></div>
<div class="class">wi-moon-waxing-gibbous-4 </div> <div class="class">wi-moon-waxing-gibbous-4</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-gibbous-5"></i></div> <div class="icon"><i class="wi wi-moon-waxing-gibbous-5"></i></div>
<div class="class">wi-moon-waxing-gibbous-5 </div> <div class="class">wi-moon-waxing-gibbous-5</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waxing-gibbous-6"></i></div> <div class="icon"><i class="wi wi-moon-waxing-gibbous-6"></i></div>
<div class="class">wi-moon-waxing-gibbous-6 </div> <div class="class">wi-moon-waxing-gibbous-6</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-full"> </i></div> <div class="icon"><i class="wi wi-moon-full"></i></div>
<div class="class">wi-moon-full </div> <div class="class">wi-moon-full</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-gibbous-1"></i></div> <div class="icon"><i class="wi wi-moon-waning-gibbous-1"></i></div>
<div class="class">wi-moon-waning-gibbous-1 </div> <div class="class">wi-moon-waning-gibbous-1</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-gibbous-2"></i></div> <div class="icon"><i class="wi wi-moon-waning-gibbous-2"></i></div>
<div class="class">wi-moon-waning-gibbous-2 </div> <div class="class">wi-moon-waning-gibbous-2</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-gibbous-3"></i></div> <div class="icon"><i class="wi wi-moon-waning-gibbous-3"></i></div>
<div class="class">wi-moon-waning-gibbous-3 </div> <div class="class">wi-moon-waning-gibbous-3</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-gibbous-4"></i></div> <div class="icon"><i class="wi wi-moon-waning-gibbous-4"></i></div>
<div class="class">wi-moon-waning-gibbous-4 </div> <div class="class">wi-moon-waning-gibbous-4</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-gibbous-5"></i></div> <div class="icon"><i class="wi wi-moon-waning-gibbous-5"></i></div>
<div class="class">wi-moon-waning-gibbous-5 </div> <div class="class">wi-moon-waning-gibbous-5</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-gibbous-6"></i></div> <div class="icon"><i class="wi wi-moon-waning-gibbous-6"></i></div>
<div class="class">wi-moon-waning-gibbous-6 </div> <div class="class">wi-moon-waning-gibbous-6</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-3rd-quarter"> </i></div> <div class="icon"><i class="wi wi-moon-3rd-quarter"></i></div>
<div class="class">wi-moon-3rd-quarter </div> <div class="class">wi-moon-3rd-quarter</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-crescent-1"></i></div> <div class="icon"><i class="wi wi-moon-waning-crescent-1"></i></div>
<div class="class">wi-moon-waning-crescent-1 </div> <div class="class">wi-moon-waning-crescent-1</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-crescent-2"></i></div> <div class="icon"><i class="wi wi-moon-waning-crescent-2"></i></div>
<div class="class">wi-moon-waning-crescent-2 </div> <div class="class">wi-moon-waning-crescent-2</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-crescent-3"></i></div> <div class="icon"><i class="wi wi-moon-waning-crescent-3"></i></div>
<div class="class">wi-moon-waning-crescent-3 </div> <div class="class">wi-moon-waning-crescent-3</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-crescent-4"></i></div> <div class="icon"><i class="wi wi-moon-waning-crescent-4"></i></div>
<div class="class">wi-moon-waning-crescent-4 </div> <div class="class">wi-moon-waning-crescent-4</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-crescent-5"></i></div> <div class="icon"><i class="wi wi-moon-waning-crescent-5"></i></div>
<div class="class">wi-moon-waning-crescent-5 </div> <div class="class">wi-moon-waning-crescent-5</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-moon-waning-crescent-6"></i></div> <div class="icon"><i class="wi wi-moon-waning-crescent-6"></i></div>
<div class="class">wi-moon-waning-crescent-6 </div> <div class="class">wi-moon-waning-crescent-6</div>
</div> </div>
</div> </div>
</div> </div>
@ -263,121 +263,121 @@
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-12"> </i></div> <div class="icon"><i class="wi wi-time-12"></i></div>
<div class="class">wi-time-12 </div> <div class="class">wi-time-12</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-1"> </i></div> <div class="icon"><i class="wi wi-time-1"></i></div>
<div class="class">wi-time-1 </div> <div class="class">wi-time-1</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-2"> </i></div> <div class="icon"><i class="wi wi-time-2"></i></div>
<div class="class">wi-time-2 </div> <div class="class">wi-time-2</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-3"> </i></div> <div class="icon"><i class="wi wi-time-3"></i></div>
<div class="class">wi-time-3 </div> <div class="class">wi-time-3</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-4"> </i></div> <div class="icon"><i class="wi wi-time-4"></i></div>
<div class="class">wi-time-4 </div> <div class="class">wi-time-4</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-5"> </i></div> <div class="icon"><i class="wi wi-time-5"></i></div>
<div class="class">wi-time-5 </div> <div class="class">wi-time-5</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-6"> </i></div> <div class="icon"><i class="wi wi-time-6"></i></div>
<div class="class">wi-time-6 </div> <div class="class">wi-time-6</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-7"> </i></div> <div class="icon"><i class="wi wi-time-7"></i></div>
<div class="class">wi-time-7 </div> <div class="class">wi-time-7</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-8"> </i></div> <div class="icon"><i class="wi wi-time-8"></i></div>
<div class="class">wi-time-8 </div> <div class="class">wi-time-8</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-9"> </i></div> <div class="icon"><i class="wi wi-time-9"></i></div>
<div class="class">wi-time-9 </div> <div class="class">wi-time-9</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-10"> </i></div> <div class="icon"><i class="wi wi-time-10"></i></div>
<div class="class">wi-time-10 </div> <div class="class">wi-time-10</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-time-11"> </i></div> <div class="icon"><i class="wi wi-time-11"></i></div>
<div class="class">wi-time-11 </div> <div class="class">wi-time-11</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h3>Beafort Wind Scale</h3> <h3>wind-beaufort Wind Scale</h3>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-0"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-0"></i></div>
<div class="class">wi-beafort-0 </div> <div class="class">wi-wind-beaufort-0</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-1"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-1"></i></div>
<div class="class">wi-beafort-1 </div> <div class="class">wi-wind-beaufort-1</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-2"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-2"></i></div>
<div class="class">wi-beafort-2 </div> <div class="class">wi-wind-beaufort-2</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-3"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-3"></i></div>
<div class="class">wi-beafort-3 </div> <div class="class">wi-wind-beaufort-3</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-4"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-4"></i></div>
<div class="class">wi-beafort-4 </div> <div class="class">wi-wind-beaufort-4</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-5"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-5"></i></div>
<div class="class">wi-beafort-5 </div> <div class="class">wi-wind-beaufort-5</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-6"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-6"></i></div>
<div class="class">wi-beafort-6 </div> <div class="class">wi-wind-beaufort-6</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-7"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-7"></i></div>
<div class="class">wi-beafort-7 </div> <div class="class">wi-wind-beaufort-7</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-8"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-8"></i></div>
<div class="class">wi-beafort-8 </div> <div class="class">wi-wind-beaufort-8</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-9"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-9"></i></div>
<div class="class">wi-beafort-9 </div> <div class="class">wi-wind-beaufort-9</div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-10"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-10"></i></div>
<div class="class">wi-beafort-10 </div> <div class="class">wi-wind-beaufort-10</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-11"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-11"></i></div>
<div class="class">wi-beafort-11 </div> <div class="class">wi-wind-beaufort-11</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-beafort-12"> </i></div> <div class="icon"><i class="wi wi-wind-beaufort-12"></i></div>
<div class="class">wi-beafort-12 </div> <div class="class">wi-wind-beaufort-12</div>
</div> </div>
</div> </div>
</div> </div>
@ -493,7 +493,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h2>New v1.2 </h2> <h2>New v1.2</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -568,7 +568,7 @@
<div class="col-sm-4"> <div class="col-sm-4">
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-hurricane"></i></div> <div class="icon"><i class="wi wi-hurricane"></i></div>
<div class="class">wi-hurricane </div> <div class="class">wi-hurricane</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-smog"></i></div> <div class="icon"><i class="wi wi-smog"></i></div>
@ -857,7 +857,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h2>Miscellaneous Weather </h2> <h2>Miscellaneous Weather</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -971,7 +971,7 @@
<div class="class">wi-up-right</div> <div class="class">wi-up-right</div>
</div> </div>
<div class="example"> <div class="example">
<div class="icon"><i class="wi wi-up"></i></div> <div class="icon"><i class="wi wi-direction-up"></i></div>
<div class="class">wi-up</div> <div class="class">wi-up</div>
</div> </div>
<div class="example"> <div class="example">
@ -986,11 +986,11 @@
<div class="col-sm-12"> <div class="col-sm-12">
<div class="beta"> <div class="beta">
<div class="title">Version 1.3</div> <div class="title">Version 1.3</div>
<p>The third release of Weather Icons with all new fonts including: new weather condition icons, missing down-right and up-left arrows, full moon phase set, full clock set, full Beafort wind strength set!</p> <p>The third release of Weather Icons with all new fonts including: new weather condition icons, missing down-right and up-left arrows, full moon phase set, full clock set, full wind-beaufort wind strength set!</p>
</div> </div>
<div class="beta"> <div class="beta">
<div class="title">Version 1.2</div> <div class="title">Version 1.2</div>
<p>The second release of Weather Icons with streamlined, updated Less, customizable variables, adjusted font boundaries, and all new fonts including: </p> <p>The second release of Weather Icons with streamlined, updated Less, customizable variables, adjusted font boundaries, and all new fonts including:</p>
</div> </div>
</div> </div>
</div> </div>
@ -998,10 +998,10 @@
<footer> <footer>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-12"> <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>. v1.0 artwork by <a href="http://www.twitter.com/artill">Lukas Bischoff</a>. v1.1, 1.2, 1.3 artwork by <a href="http://www.twitter.com/Erik_UX">Erik Flowers</a></p> <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, 1.2, 1.3 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> <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> <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> </div>
</div> </div>

276
docs/jade/index.jade
View File

@ -2,13 +2,13 @@ doctype
html html
head head
title Weather Icons - 189 Icon Font inspired by Font Awesome and designed for Bootstrap title Weather Icons - 189 Icon Font inspired by Font Awesome and designed for Bootstrap
// favicons // favicons
link(rel='apple-touch-icon', sizes='57x57', href='favicons/apple-touch-icon-57x57.png') link(rel='apple-touch-icon', sizes='57x57', href='favicons/apple-touch-icon-57x57.png')
link(rel='apple-touch-icon', sizes='60x60', href='favicons/apple-touch-icon-60x60.png') link(rel='apple-touch-icon', sizes='60x60', href='favicons/apple-touch-icon-60x60.png')
link(rel='icon', type='image/png', href='favicons/favicon-16x16.png', sizes='16x16') link(rel='icon', type='image/png', href='favicons/favicon-16x16.png', sizes='16x16')
link(rel='icon', type='image/png', href='favicons/favicon-32x32.png', sizes='32x32') link(rel='icon', type='image/png', href='favicons/favicon-32x32.png', sizes='32x32')
meta(name='msapplication-TileColor', content='#da532c') meta(name='msapplication-TileColor', content='#da532c')
//favicons //favicons
meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no') meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
script(src='//code.jquery.com/jquery-latest.min.js') script(src='//code.jquery.com/jquery-latest.min.js')
@ -16,9 +16,9 @@ html
script(src='//use.typekit.net/hse2lqc.js') script(src='//use.typekit.net/hse2lqc.js')
script. script.
try{Typekit.load();}catch(e){} script(src='js/bootstrap.min.js') try{Typekit.load();}catch(e){} script(src='js/bootstrap.min.js')
link(rel='stylesheet', href='css/styles.css') link(rel='stylesheet', href='css/styles.css')
link(rel='stylesheet', href='../css/weather-icons-sass.css') link(rel='stylesheet', href='../css/weather-icons.css')
script. script.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (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), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@ -44,7 +44,7 @@ html
i.wi.wi-day-lightning i.wi.wi-day-lightning
i.wi.wi-night-thunderstorm i.wi.wi-night-thunderstorm
i.wi.wi-day-snow i.wi.wi-day-snow
i.wi.wi-sprinkles i.wi.wi-sprinkles
i.wi.wi-day-sunny i.wi.wi-day-sunny
i.wi.wi-cloudy i.wi.wi-cloudy
i.wi.wi-night-rain-mix i.wi.wi-night-rain-mix
@ -53,21 +53,21 @@ html
i.wi.wi-day-cloudy-windy i.wi.wi-day-cloudy-windy
i.wi.wi-night-rain i.wi.wi-night-rain
i.wi.wi-night-alt-snow i.wi.wi-night-alt-snow
p.headline Weather Icons is a font of 189 weather themed icons, ready to be dropped right into p.headline Weather Icons is a font of 189 weather themed icons, ready to be dropped right into
a(href="http://getbootstrap.com") Bootstrap a(href="http://getbootstrap.com") Bootstrap
| or any other project. | or any other project.
i.wi.wi-cloudy i.wi.wi-cloudy
p Inspired by p Inspired by
a(href="http://fontawesome.io/") Font Awesome a(href="http://fontawesome.io/") Font Awesome
|, they work in essentially the same way. They are infinitley scalable and any CSS that can be applied to text can be applied to them. All you need to do to insert an icon is add the class to an "i" element: |, they work in essentially the same way. They are infinitley scalable and any CSS that can be applied to text can be applied to them. All you need to do to insert an icon is add the class to an "i" element:
code &lt;i class="wi wi-day-lightning"&gt;&lt;/i&gt; code &lt;i class="wi wi-day-lightning"&gt;&lt;/i&gt;
p Please make requests or report any issues to the p Please make requests or report any issues to the
a(href="https://github.com/erikflowers/weather-icons/issues") main repository. a(href="https://github.com/erikflowers/weather-icons/issues") main repository.
//- p Want to use the font in your desktop applications? Check out the //- p Want to use the font in your desktop applications? Check out the
//- a(href="/cheatsheet/") cheatsheet here. //- a(href="/cheatsheet/") cheatsheet here.
//- | Just install the font on your system and copy and paste, it's that easy. //- | Just install the font on your system and copy and paste, it's that easy.
p.follow p.follow
a.twitter-follow-button(href='https://twitter.com/weathericons', data-show-count='false', data-size='large', data-dnt='true') Follow @weathericons a.twitter-follow-button(href='https://twitter.com/weathericons', data-show-count='false', data-size='large', data-dnt='true') Follow @weathericons
@ -79,22 +79,22 @@ html
.row.download-here .row.download-here
.download-button .download-button
a.download.btn.btn-primary.btn-large(href="https://github.com/erikflowers/weather-icons") a.download.btn.btn-primary.btn-large(href="https://github.com/erikflowers/weather-icons")
|Download version 1.3 |Download version 1.3
i.wi.wi-cloud i.wi.wi-cloud
.row.social .row.social
.col-sm-12 .col-sm-12
p p
a.twitter-share-button(href='https://twitter.com/share', data-lang='en', data-text='Weather Icons - Bootstrap ready weather themed font icon!', data-via='Erik_UX', data-count='none') Tweet a.twitter-share-button(href='https://twitter.com/share', data-lang='en', data-text='Weather Icons - Bootstrap ready weather themed font icon!', data-via='Erik_UX', data-count='none') Tweet
script. 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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
a.twitter-follow-button(href='https://twitter.com/Erik_UX', data-show-count='false', data-lang='en') Follow @Erik_UX a.twitter-follow-button(href='https://twitter.com/Erik_UX', data-show-count='false', data-lang='en') Follow @Erik_UX
script 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"); !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");
a.twitter-follow-button(href='https://twitter.com/artill', data-show-count='false', data-lang='en') Follow @artill a.twitter-follow-button(href='https://twitter.com/artill', data-show-count='false', data-lang='en') Follow @artill
script 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"); !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");
@ -103,8 +103,8 @@ html
iframe(src='http://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=watch&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='73', height='20') iframe(src='http://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=watch&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='73', height='20')
iframe(src='http://ghbtns.com/github-btn.html?user=erikflowers&type=follow&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='165', height='20') iframe(src='http://ghbtns.com/github-btn.html?user=erikflowers&type=follow&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='165', height='20')
section.content.container.iconExamples section.content.container.iconExamples
.row .row
@ -114,165 +114,165 @@ html
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-umbrella i.wi.wi-umbrella
.class wi-umbrella .class wi-umbrella
.example .example
.icon .icon
i.wi.wi-day-windy i.wi.wi-day-windy
.class wi-day-windy .class wi-day-windy
.example .example
.icon .icon
i.wi.wi-night-alt-cloudy i.wi.wi-night-alt-cloudy
.class wi-night-alt-cloudy .class wi-night-alt-cloudy
.example .example
.icon .icon
i.wi.wi-up-left i.wi.wi-up-left
.class wi-up-left .class wi-up-left
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-down-right i.wi.wi-down-right
.class wi-down-right .class wi-down-right
.example .example
.icon .icon
i.wi.wi-day-sleet i.wi.wi-day-sleet
.class wi-day-sleet .class wi-day-sleet
.example .example
.icon .icon
i.wi.wi-night-sleet i.wi.wi-night-sleet
.class wi-night-sleet .class wi-night-sleet
.example .example
.icon .icon
i.wi.wi-night-alt-sleet i.wi.wi-night-alt-sleet
.class wi-night-alt-sleet .class wi-night-alt-sleet
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-sleet i.wi.wi-sleet
.class wi-sleet .class wi-sleet
.example .example
.icon .icon
i.wi.wi-day-haze i.wi.wi-day-haze
.class wi-day-haze .class wi-day-haze
.row .row
.col-sm-12 .col-sm-12
h3 Moon Phases h3 Moon Phases
.row .row
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-moon-new i.wi.wi-moon-new
.class wi-moon-new .class wi-moon-new
.example .example
.icon .icon
i.wi.wi-moon-waxing-cresent-1 i.wi.wi-moon-waxing-cresent-1
.class wi-moon-waxing-cresent-1 .class wi-moon-waxing-cresent-1
.example .example
.icon .icon
i.wi.wi-moon-waxing-cresent-2 i.wi.wi-moon-waxing-cresent-2
.class wi-moon-waxing-cresent-2 .class wi-moon-waxing-cresent-2
.example .example
.icon .icon
i.wi.wi-moon-waxing-cresent-3 i.wi.wi-moon-waxing-cresent-3
.class wi-moon-waxing-cresent-3 .class wi-moon-waxing-cresent-3
.example .example
.icon .icon
i.wi.wi-moon-waxing-cresent-4 i.wi.wi-moon-waxing-cresent-4
.class wi-moon-waxing-cresent-4 .class wi-moon-waxing-cresent-4
.example .example
.icon .icon
i.wi.wi-moon-waxing-cresent-5 i.wi.wi-moon-waxing-cresent-5
.class wi-moon-waxing-cresent-5 .class wi-moon-waxing-cresent-5
.example .example
.icon .icon
i.wi.wi-moon-waxing-cresent-6 i.wi.wi-moon-waxing-cresent-6
.class wi-moon-waxing-cresent-6 .class wi-moon-waxing-cresent-6
.example .example
.icon .icon
i.wi.wi-moon-first-quarter i.wi.wi-moon-first-quarter
.class wi-moon-first-quarter .class wi-moon-first-quarter
.example .example
.icon .icon
i.wi.wi-moon-waxing-gibbous-1 i.wi.wi-moon-waxing-gibbous-1
.class wi-moon-waxing-gibbous-1 .class wi-moon-waxing-gibbous-1
.example .example
.icon .icon
i.wi.wi-moon-waxing-gibbous-2 i.wi.wi-moon-waxing-gibbous-2
.class wi-moon-waxing-gibbous-2 .class wi-moon-waxing-gibbous-2
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-moon-waxing-gibbous-3 i.wi.wi-moon-waxing-gibbous-3
.class wi-moon-waxing-gibbous-3 .class wi-moon-waxing-gibbous-3
.example .example
.icon .icon
i.wi.wi-moon-waxing-gibbous-4 i.wi.wi-moon-waxing-gibbous-4
.class wi-moon-waxing-gibbous-4 .class wi-moon-waxing-gibbous-4
.example .example
.icon .icon
i.wi.wi-moon-waxing-gibbous-5 i.wi.wi-moon-waxing-gibbous-5
.class wi-moon-waxing-gibbous-5 .class wi-moon-waxing-gibbous-5
.example .example
.icon .icon
i.wi.wi-moon-waxing-gibbous-6 i.wi.wi-moon-waxing-gibbous-6
.class wi-moon-waxing-gibbous-6 .class wi-moon-waxing-gibbous-6
.example .example
.icon .icon
i.wi.wi-moon-full i.wi.wi-moon-full
.class wi-moon-full .class wi-moon-full
.example .example
.icon .icon
i.wi.wi-moon-waning-gibbous-1 i.wi.wi-moon-waning-gibbous-1
.class wi-moon-waning-gibbous-1 .class wi-moon-waning-gibbous-1
.example .example
.icon .icon
i.wi.wi-moon-waning-gibbous-2 i.wi.wi-moon-waning-gibbous-2
.class wi-moon-waning-gibbous-2 .class wi-moon-waning-gibbous-2
.example .example
.icon .icon
i.wi.wi-moon-waning-gibbous-3 i.wi.wi-moon-waning-gibbous-3
.class wi-moon-waning-gibbous-3 .class wi-moon-waning-gibbous-3
.example .example
.icon .icon
i.wi.wi-moon-waning-gibbous-4 i.wi.wi-moon-waning-gibbous-4
.class wi-moon-waning-gibbous-4 .class wi-moon-waning-gibbous-4
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-moon-waning-gibbous-5 i.wi.wi-moon-waning-gibbous-5
.class wi-moon-waning-gibbous-5 .class wi-moon-waning-gibbous-5
.example .example
.icon .icon
i.wi.wi-moon-waning-gibbous-6 i.wi.wi-moon-waning-gibbous-6
.class wi-moon-waning-gibbous-6 .class wi-moon-waning-gibbous-6
.example .example
.icon .icon
i.wi.wi-moon-3rd-quarter i.wi.wi-moon-3rd-quarter
.class wi-moon-3rd-quarter .class wi-moon-3rd-quarter
.example .example
.icon .icon
i.wi.wi-moon-waning-crescent-1 i.wi.wi-moon-waning-crescent-1
.class wi-moon-waning-crescent-1 .class wi-moon-waning-crescent-1
.example .example
.icon .icon
i.wi.wi-moon-waning-crescent-2 i.wi.wi-moon-waning-crescent-2
.class wi-moon-waning-crescent-2 .class wi-moon-waning-crescent-2
.example .example
.icon .icon
i.wi.wi-moon-waning-crescent-3 i.wi.wi-moon-waning-crescent-3
.class wi-moon-waning-crescent-3 .class wi-moon-waning-crescent-3
.example .example
.icon .icon
i.wi.wi-moon-waning-crescent-4 i.wi.wi-moon-waning-crescent-4
.class wi-moon-waning-crescent-4 .class wi-moon-waning-crescent-4
.example .example
.icon .icon
i.wi.wi-moon-waning-crescent-5 i.wi.wi-moon-waning-crescent-5
.class wi-moon-waning-crescent-5 .class wi-moon-waning-crescent-5
.example .example
.icon .icon
i.wi.wi-moon-waning-crescent-6 i.wi.wi-moon-waning-crescent-6
.class wi-moon-waning-crescent-6 .class wi-moon-waning-crescent-6
.row .row
.col-sm-12 .col-sm-12
@ -281,113 +281,113 @@ html
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-time-12 i.wi.wi-time-12
.class wi-time-12 .class wi-time-12
.example .example
.icon .icon
i.wi.wi-time-1 i.wi.wi-time-1
.class wi-time-1 .class wi-time-1
.example .example
.icon .icon
i.wi.wi-time-2 i.wi.wi-time-2
.class wi-time-2 .class wi-time-2
.example .example
.icon .icon
i.wi.wi-time-3 i.wi.wi-time-3
.class wi-time-3 .class wi-time-3
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-time-4 i.wi.wi-time-4
.class wi-time-4 .class wi-time-4
.example .example
.icon .icon
i.wi.wi-time-5 i.wi.wi-time-5
.class wi-time-5 .class wi-time-5
.example .example
.icon .icon
i.wi.wi-time-6 i.wi.wi-time-6
.class wi-time-6 .class wi-time-6
.example .example
.icon .icon
i.wi.wi-time-7 i.wi.wi-time-7
.class wi-time-7 .class wi-time-7
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-time-8 i.wi.wi-time-8
.class wi-time-8 .class wi-time-8
.example .example
.icon .icon
i.wi.wi-time-9 i.wi.wi-time-9
.class wi-time-9 .class wi-time-9
.example .example
.icon .icon
i.wi.wi-time-10 i.wi.wi-time-10
.class wi-time-10 .class wi-time-10
.example .example
.icon .icon
i.wi.wi-time-11 i.wi.wi-time-11
.class wi-time-11 .class wi-time-11
.row .row
.col-sm-12 .col-sm-12
h3 Beafort Wind Scale h3 wind-beaufort Wind Scale
.row .row
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-beafort-0 i.wi.wi-wind-beaufort-0
.class wi-beafort-0 .class wi-wind-beaufort-0
.example .example
.icon .icon
i.wi.wi-beafort-1 i.wi.wi-wind-beaufort-1
.class wi-beafort-1 .class wi-wind-beaufort-1
.example .example
.icon .icon
i.wi.wi-beafort-2 i.wi.wi-wind-beaufort-2
.class wi-beafort-2 .class wi-wind-beaufort-2
.example .example
.icon .icon
i.wi.wi-beafort-3 i.wi.wi-wind-beaufort-3
.class wi-beafort-3 .class wi-wind-beaufort-3
.example .example
.icon .icon
i.wi.wi-beafort-4 i.wi.wi-wind-beaufort-4
.class wi-beafort-4 .class wi-wind-beaufort-4
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-beafort-5 i.wi.wi-wind-beaufort-5
.class wi-beafort-5 .class wi-wind-beaufort-5
.example .example
.icon .icon
i.wi.wi-beafort-6 i.wi.wi-wind-beaufort-6
.class wi-beafort-6 .class wi-wind-beaufort-6
.example .example
.icon .icon
i.wi.wi-beafort-7 i.wi.wi-wind-beaufort-7
.class wi-beafort-7 .class wi-wind-beaufort-7
.example .example
.icon .icon
i.wi.wi-beafort-8 i.wi.wi-wind-beaufort-8
.class wi-beafort-8 .class wi-wind-beaufort-8
.example .example
.icon .icon
i.wi.wi-beafort-9 i.wi.wi-wind-beaufort-9
.class wi-beafort-9 .class wi-wind-beaufort-9
.col-sm-4 .col-sm-4
.example .example
.icon .icon
i.wi.wi-beafort-10 i.wi.wi-wind-beaufort-10
.class wi-beafort-10 .class wi-wind-beaufort-10
.example .example
.icon .icon
i.wi.wi-beafort-11 i.wi.wi-wind-beaufort-11
.class wi-beafort-11 .class wi-wind-beaufort-11
.example .example
.icon .icon
i.wi.wi-beafort-12 i.wi.wi-wind-beaufort-12
.class wi-beafort-12 .class wi-wind-beaufort-12
.row .row
.col-sm-12 .col-sm-12
h3 Wind Directions - 0 degrees through 345 degrees h3 Wind Directions - 0 degrees through 345 degrees
@ -495,7 +495,7 @@ html
.row .row
.col-sm-12 .col-sm-12
h2 New v1.2 h2 New v1.2
.row .row
.col-sm-4 .col-sm-4
.example .example
@ -567,7 +567,7 @@ html
.example .example
.icon .icon
i.wi.wi-hurricane i.wi.wi-hurricane
.class wi-hurricane .class wi-hurricane
.example .example
.icon .icon
i.wi.wi-smog i.wi.wi-smog
@ -841,7 +841,7 @@ html
.row .row
.col-sm-12 .col-sm-12
h2 Miscellaneous Weather h2 Miscellaneous Weather
.row .row
.col-sm-4 .col-sm-4
.example .example
@ -952,7 +952,7 @@ html
.class wi-up-right .class wi-up-right
.example .example
.icon .icon
i.wi.wi-up i.wi.wi-direction-up
.class wi-up .class wi-up
.example .example
.icon .icon
@ -975,29 +975,29 @@ html
.col-sm-12 .col-sm-12
.beta .beta
.title Version 1.3 .title Version 1.3
p The third release of Weather Icons with all new fonts including: new weather condition icons, missing down-right and up-left arrows, full moon phase set, full clock set, full Beafort wind strength set! p The third release of Weather Icons with all new fonts including: new weather condition icons, missing down-right and up-left arrows, full moon phase set, full clock set, full wind-beaufort wind strength set!
.beta .beta
.title Version 1.2 .title Version 1.2
p The second release of Weather Icons with streamlined, updated Less, customizable variables, adjusted font boundaries, and all new fonts including: p The second release of Weather Icons with streamlined, updated Less, customizable variables, adjusted font boundaries, and all new fonts including:
footer footer
.container .container
.row .row
.col-sm-12 .col-sm-12
p The Weather Icons project created and maintained by p The Weather Icons project created and maintained by
a(href="http://www.twitter.com/Erik_UX") Erik Flowers a(href="http://www.twitter.com/Erik_UX") Erik Flowers
|. v1.0 artwork by |. v1.0 artwork by
a(href="http://www.twitter.com/artill") Lukas Bischoff a(href="http://www.twitter.com/artill") Lukas Bischoff
|. v1.1, 1.2, 1.3 artwork by |. v1.1, 1.2, 1.3 artwork by
a(href="http://www.twitter.com/Erik_UX") Erik Flowers a(href="http://www.twitter.com/Erik_UX") Erik Flowers
p LESS/HTML implementation inspired and heavily influenced by p LESS/HTML implementation inspired and heavily influenced by
a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome. a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome.
p Weather Icons licensed under p Weather Icons licensed under
a("http://scripts.sil.org/OFL") SIL OFL 1.1 a("http://scripts.sil.org/OFL") SIL OFL 1.1
| &mdash; Code licensed under | &mdash; Code licensed under
a("http://opensource.org/licenses/mit-license.html") MIT License a("http://opensource.org/licenses/mit-license.html") MIT License
| &mdash; Documentation licensed under | &mdash; Documentation licensed under
a("http://creativecommons.org/licenses/by/3.0/") CC BY 3.0 a("http://creativecommons.org/licenses/by/3.0/") CC BY 3.0

251
less/weather-icons-classes.less
View File

@ -1,17 +1,17 @@
@font-face { @font-face {
font-family: '@{weather-icons-font-family}'; font-family: '@{wi-font-family}';
src: url('@{weather-icons-path}/@{weather-icons-font-family}-regular-webfont.eot'); src: url('@{wi-path}/@{wi-font-family}-regular-webfont.eot');
src: url('@{weather-icons-path}/@{weather-icons-font-family}-regular-webfont.eot?#iefix') format('embedded-opentype'), src: url('@{wi-path}/@{wi-font-family}-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('@{weather-icons-path}/@{weather-icons-font-family}-regular-webfont.woff') format('woff'), url('@{wi-path}/@{wi-font-family}-regular-webfont.woff') format('woff'),
url('@{weather-icons-path}/@{weather-icons-font-family}-regular-webfont.ttf') format('truetype'), url('@{wi-path}/@{wi-font-family}-regular-webfont.ttf') format('truetype'),
url('@{weather-icons-path}/@{weather-icons-font-family}-regular-webfont.svg#weathericons-regular-webfontRg') format('svg'); url('@{wi-path}/@{wi-font-family}-regular-webfont.svg#weathericons-regular-webfontRg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
.@{weather-icons-prefix} { .@{wi-css-prefix} {
display: inline-block; display: inline-block;
font-family: '@{weather-icons-font-family}'; font-family: '@{wi-font-family}';
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
@ -19,229 +19,16 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
// Day // icon definitions
.@{weather-icons-prefix}-day-cloudy-gusts:before { content: @day-cloudy-gusts ; } // --------------------------
.@{weather-icons-prefix}-day-cloudy-windy:before { content: @day-cloudy-windy ; }
.@{weather-icons-prefix}-day-cloudy:before { content: @day-cloudy ; }
.@{weather-icons-prefix}-day-fog:before { content: @day-fog ; }
.@{weather-icons-prefix}-day-hail:before { content: @day-hail ; }
.@{weather-icons-prefix}-day-lightning:before { content: @day-lightning ; }
.@{weather-icons-prefix}-day-rain-mix:before { content: @day-rain-mix ; }
.@{weather-icons-prefix}-day-rain-wind:before { content: @day-rain-wind ; }
.@{weather-icons-prefix}-day-rain:before { content: @day-rain ; }
.@{weather-icons-prefix}-day-showers:before { content: @day-showers ; }
.@{weather-icons-prefix}-day-snow:before { content: @day-snow ; }
.@{weather-icons-prefix}-day-sprinkle:before { content: @day-sprinkle ; }
.@{weather-icons-prefix}-day-sunny-overcast:before { content: @day-sunny-overcast ; }
.@{weather-icons-prefix}-day-sunny:before { content: @day-sunny ; }
.@{weather-icons-prefix}-day-storm-showers:before { content: @day-storm-showers ; }
.@{weather-icons-prefix}-day-thunderstorm:before { content: @day-thunderstorm ; }
// Neutral-
.@{weather-icons-prefix}-cloudy-gusts:before { content: @cloudy-gusts ; }
.@{weather-icons-prefix}-cloudy-windy:before { content: @cloudy-windy ; }
.@{weather-icons-prefix}-cloudy:before { content: @cloudy ; }
.@{weather-icons-prefix}-fog:before { content: @fog ; }
.@{weather-icons-prefix}-hail:before { content: @hail ; }
.@{weather-icons-prefix}-lightning:before { content: @lightning ; }
.@{weather-icons-prefix}-rain-mix:before { content: @rain-mix ; }
.@{weather-icons-prefix}-rain-wind:before { content: @rain-wind ; }
.@{weather-icons-prefix}-rain:before { content: @rain ; }
.@{weather-icons-prefix}-showers:before { content: @showers ; }
.@{weather-icons-prefix}-snow:before { content: @snow ; }
.@{weather-icons-prefix}-sprinkle:before { content: @sprinkle ; }
.@{weather-icons-prefix}-storm-showers:before { content: @storm-showers ; }
.@{weather-icons-prefix}-thunderstorm:before { content: @thunderstorm ; }
.@{weather-icons-prefix}-windy:before { content: @windy ; }
// Night
.@{weather-icons-prefix}-night-alt-cloudy-gusts:before { content: @night-alt-cloudy-gusts ; }
.@{weather-icons-prefix}-night-alt-cloudy-windy:before { content: @night-alt-cloudy-windy ; }
.@{weather-icons-prefix}-night-alt-hail:before { content: @night-alt-hail ; }
.@{weather-icons-prefix}-night-alt-lightning:before { content: @night-alt-lightning ; }
.@{weather-icons-prefix}-night-alt-rain-mix:before { content: @night-alt-rain-mix ; }
.@{weather-icons-prefix}-night-alt-rain-wind:before { content: @night-alt-rain-wind ; }
.@{weather-icons-prefix}-night-alt-rain:before { content: @night-alt-rain ; }
.@{weather-icons-prefix}-night-alt-showers:before { content: @night-alt-showers ; }
.@{weather-icons-prefix}-night-alt-snow:before { content: @night-alt-snow ; }
.@{weather-icons-prefix}-night-alt-sprinkle:before { content: @night-alt-sprinkle ; }
.@{weather-icons-prefix}-night-alt-storm-showers:before { content: @night-alt-storm-showers ; }
.@{weather-icons-prefix}-night-alt-thunderstorm:before { content: @night-alt-thunderstorm ; }
.@{weather-icons-prefix}-night-clear:before { content: @night-clear ; }
.@{weather-icons-prefix}-night-cloudy-gusts:before { content: @night-cloudy-gusts ; }
.@{weather-icons-prefix}-night-cloudy-windy:before { content: @night-cloudy-windy ; }
.@{weather-icons-prefix}-night-cloudy:before { content: @night-cloudy ; }
.@{weather-icons-prefix}-night-hail:before { content: @night-hail ; }
.@{weather-icons-prefix}-night-lightning:before { content: @night-lightning ; }
.@{weather-icons-prefix}-night-rain-mix:before { content: @night-rain-mix ; }
.@{weather-icons-prefix}-night-rain-wind:before { content: @night-rain-wind ; }
.@{weather-icons-prefix}-night-rain:before { content: @night-rain ; }
.@{weather-icons-prefix}-night-showers:before { content: @night-showers ; }
.@{weather-icons-prefix}-night-snow:before { content: @night-snow ; }
.@{weather-icons-prefix}-night-sprinkle:before { content: @night-sprinkle ; }
.@{weather-icons-prefix}-night-storm-showers:before { content: @night-storm-showers ; }
.@{weather-icons-prefix}-night-thunderstorm:before { content: @night-thunderstorm ; }
// Misc
.@{weather-icons-prefix}-celsius:before { content: @celsius ; }
.@{weather-icons-prefix}-cloud-down:before { content: @cloud-down ; }
.@{weather-icons-prefix}-cloud-refresh:before { content: @cloud-refresh ; }
.@{weather-icons-prefix}-cloud-up:before { content: @cloud-up ; }
.@{weather-icons-prefix}-cloud:before { content: @cloud ; }
.@{weather-icons-prefix}-degrees:before { content: @degrees ; }
.@{weather-icons-prefix}-down-left:before { content: @down-left ; }
.@{weather-icons-prefix}-down:before { content: @down ; }
.@{weather-icons-prefix}-fahrenheit:before { content: @fahrenheit ; }
.@{weather-icons-prefix}-horizon-alt:before { content: @horizon-alt ; }
.@{weather-icons-prefix}-horizon:before { content: @horizon ; }
.@{weather-icons-prefix}-left:before { content: @left ; }
.@{weather-icons-prefix}-lightning:before { content: @lightning ; }
.@{weather-icons-prefix}-night-fog:before { content: @night-fog ; }
.@{weather-icons-prefix}-refresh-alt:before { content: @refresh-alt ; }
.@{weather-icons-prefix}-refresh:before { content: @refresh ; }
.@{weather-icons-prefix}-right:before { content: @right ; }
.@{weather-icons-prefix}-sprinkles:before { content: @sprinkles ; }
.@{weather-icons-prefix}-strong-wind:before { content: @strong-wind ; }
.@{weather-icons-prefix}-sunrise:before { content: @sunrise ; }
.@{weather-icons-prefix}-sunset:before { content: @sunset ; }
.@{weather-icons-prefix}-thermometer-exterior:before { content: @thermometer-exterior ; }
.@{weather-icons-prefix}-thermometer-internal:before { content: @thermometer-internal ; }
.@{weather-icons-prefix}-thermometer:before { content: @thermometer ; }
.@{weather-icons-prefix}-tornado:before { content: @tornado ; }
.@{weather-icons-prefix}-up-right:before { content: @up-right ; }
.@{weather-icons-prefix}-up:before { content: @up ; }
.@{weather-icons-prefix}-wind-west:before { content: @wind-west ; }
.@{weather-icons-prefix}-wind-south-west:before { content: @wind-south-west ; }
.@{weather-icons-prefix}-wind-south-east:before { content: @wind-south-east ; }
.@{weather-icons-prefix}-wind-south:before { content: @wind-south ; }
.@{weather-icons-prefix}-wind-north-west:before { content: @wind-north-west ; }
.@{weather-icons-prefix}-wind-north-east:before { content: @wind-north-east ; }
.@{weather-icons-prefix}-wind-north:before { content: @wind-north ; }
.@{weather-icons-prefix}-wind-east:before { content: @wind-east ; }
// New v1.1
.@{weather-icons-prefix}-smoke:before { content: @smoke ; }
.@{weather-icons-prefix}-dust:before { content: @dust ; }
.@{weather-icons-prefix}-snow-wind:before { content: @snow-wind ; }
.@{weather-icons-prefix}-day-snow-wind:before { content: @day-snow-wind ; }
.@{weather-icons-prefix}-night-snow-wind:before { content: @night-snow-wind ; }
.@{weather-icons-prefix}-night-alt-snow-wind:before { content: @night-alt-snow-wind ; }
.@{weather-icons-prefix}-day-sleet-storm:before { content: @day-sleet-storm ; }
.@{weather-icons-prefix}-night-sleet-storm:before { content: @night-sleet-storm ; }
.@{weather-icons-prefix}-night-alt-sleet-storm:before { content: @night-alt-sleet-storm ; }
.@{weather-icons-prefix}-day-snow-thunderstorm:before { content: @day-snow-thunderstorm ; }
.@{weather-icons-prefix}-night-snow-thunderstorm:before { content: @night-snow-thunderstorm ; }
.@{weather-icons-prefix}-night-alt-snow-thunderstorm:before { content: @night-alt-snow-thunderstorm ; }
.@{weather-icons-prefix}-solar-eclipse:before { content: @solar-eclipse ; }
.@{weather-icons-prefix}-lunar-eclipse:before { content: @lunar-eclipse ; }
.@{weather-icons-prefix}-meteor:before { content: @meteor ; }
.@{weather-icons-prefix}-hot:before { content: @hot ; }
.@{weather-icons-prefix}-hurricane:before { content: @hurricane ; }
.@{weather-icons-prefix}-smog:before { content: @smog ; }
.@{weather-icons-prefix}-alien:before { content: @alien ; }
.@{weather-icons-prefix}-snowflake-cold:before { content: @snowflake-cold ; }
.@{weather-icons-prefix}-stars:before { content: @stars ; }
.@{weather-icons-prefix}-night-partly-cloudy:before { content: @night-partly-cloudy ; } // create icon definitions
.createIconClasses(@iterator: 1) when(@iterator <= length(@wi-icon-glyphs)) {
// New 1.3 @wi-glyph-name: extract(extract(@wi-icon-glyphs, @iterator), 1);
.@{weather-icons-prefix}-umbrella:before { content: @umbrella ; } @wi-glyph-name-unquoted: ~"@{wi-glyph-name}";
.@{weather-icons-prefix}-day-windy:before { content: @day-windy ; } .@{wi-css-prefix}-@{wi-glyph-name-unquoted}:before {
.@{weather-icons-prefix}-night-alt-cloudy:before { content: @night-alt-cloudy ; } content: extract(extract(@wi-icon-glyphs, @iterator), 2);
.@{weather-icons-prefix}-up-left:before { content: @up-left ; } }
.@{weather-icons-prefix}-down-right:before { content: @down-right ; } .createIconClasses((@iterator + 1));
.@{weather-icons-prefix}-time-12:before { content: @time-12 ; }
.@{weather-icons-prefix}-time-1:before { content: @time-1 ; }
.@{weather-icons-prefix}-time-2:before { content: @time-2 ; }
.@{weather-icons-prefix}-time-3:before { content: @time-3 ; }
.@{weather-icons-prefix}-time-4:before { content: @time-4 ; }
.@{weather-icons-prefix}-time-5:before { content: @time-5 ; }
.@{weather-icons-prefix}-time-6:before { content: @time-6 ; }
.@{weather-icons-prefix}-time-7:before { content: @time-7 ; }
.@{weather-icons-prefix}-time-8:before { content: @time-8 ; }
.@{weather-icons-prefix}-time-9:before { content: @time-9 ; }
.@{weather-icons-prefix}-time-10:before { content: @time-10 ; }
.@{weather-icons-prefix}-time-11:before { content: @time-11 ; }
//
.@{weather-icons-prefix}-day-sleet:before { content: @day-sleet ; }
.@{weather-icons-prefix}-night-sleet:before { content: @night-sleet ; }
.@{weather-icons-prefix}-night-alt-sleet:before { content: @night-alt-sleet ; }
.@{weather-icons-prefix}-sleet:before { content: @sleet ; }
.@{weather-icons-prefix}-day-haze:before { content: @day-haze ; }
.@{weather-icons-prefix}-beafort-0:before { content: @beafort-0 ; }
.@{weather-icons-prefix}-beafort-1:before { content: @beafort-1 ; }
.@{weather-icons-prefix}-beafort-2:before { content: @beafort-2 ; }
.@{weather-icons-prefix}-beafort-3:before { content: @beafort-3 ; }
.@{weather-icons-prefix}-beafort-4:before { content: @beafort-4 ; }
.@{weather-icons-prefix}-beafort-5:before { content: @beafort-5 ; }
.@{weather-icons-prefix}-beafort-6:before { content: @beafort-6 ; }
.@{weather-icons-prefix}-beafort-7:before { content: @beafort-7 ; }
.@{weather-icons-prefix}-beafort-8:before { content: @beafort-8 ; }
.@{weather-icons-prefix}-beafort-9:before { content: @beafort-9 ; }
.@{weather-icons-prefix}-beafort-10:before { content: @beafort-10 ; }
.@{weather-icons-prefix}-beafort-11:before { content: @beafort-11 ; }
.@{weather-icons-prefix}-beafort-12:before { content: @beafort-12 ; }
// Wind Variables 1.3
.@{weather-icons-prefix}-wind-default:before { content: @wind-default ; }
.wind-rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
} }
.@{weather-icons-prefix}-wind-default { .createIconClasses();
&._0-deg {.wind-rotate(0deg); }
&._15-deg {.wind-rotate(15deg); }
&._30-deg {.wind-rotate(30deg); }
&._45-deg {.wind-rotate(45deg); }
&._60-deg {.wind-rotate(60deg); }
&._75-deg {.wind-rotate(75deg); }
&._90-deg {.wind-rotate(90deg); }
&._105-deg {.wind-rotate(105deg); }
&._120-deg {.wind-rotate(120deg); }
&._135-deg {.wind-rotate(135deg); }
&._150-deg {.wind-rotate(150deg); }
&._165-deg {.wind-rotate(165deg); }
&._180-deg {.wind-rotate(180deg); }
&._195-deg {.wind-rotate(195deg); }
&._210-deg {.wind-rotate(210deg); }
&._225-deg {.wind-rotate(225deg); }
&._240-deg {.wind-rotate(240deg); }
&._255-deg {.wind-rotate(255deg); }
&._270-deg {.wind-rotate(270deg); }
&._285-deg {.wind-rotate(295deg); }
&._300-deg {.wind-rotate(300deg); }
&._315-deg {.wind-rotate(315deg); }
&._330-deg {.wind-rotate(330deg); }
&._345-deg {.wind-rotate(345deg); }
}
// Moon phases, v1.3
.@{weather-icons-prefix}-moon-new:before { content: @moon-new ; }
.@{weather-icons-prefix}-moon-waxing-cresent-1:before { content: @moon-waxing-cresent-1 ; }
.@{weather-icons-prefix}-moon-waxing-cresent-2:before { content: @moon-waxing-cresent-2 ; }
.@{weather-icons-prefix}-moon-waxing-cresent-3:before { content: @moon-waxing-cresent-3 ; }
.@{weather-icons-prefix}-moon-waxing-cresent-4:before { content: @moon-waxing-cresent-4 ; }
.@{weather-icons-prefix}-moon-waxing-cresent-5:before { content: @moon-waxing-cresent-5 ; }
.@{weather-icons-prefix}-moon-waxing-cresent-6:before { content: @moon-waxing-cresent-6 ; }
.@{weather-icons-prefix}-moon-first-quarter:before { content: @moon-first-quarter ; }
.@{weather-icons-prefix}-moon-waxing-gibbous-1:before { content: @moon-waxing-gibbous-1 ; }
.@{weather-icons-prefix}-moon-waxing-gibbous-2:before { content: @moon-waxing-gibbous-2 ; }
.@{weather-icons-prefix}-moon-waxing-gibbous-3:before { content: @moon-waxing-gibbous-3 ; }
.@{weather-icons-prefix}-moon-waxing-gibbous-4:before { content: @moon-waxing-gibbous-4 ; }
.@{weather-icons-prefix}-moon-waxing-gibbous-5:before { content: @moon-waxing-gibbous-5 ; }
.@{weather-icons-prefix}-moon-waxing-gibbous-6:before { content: @moon-waxing-gibbous-6 ; }
.@{weather-icons-prefix}-moon-full:before { content: @moon-full ; }
.@{weather-icons-prefix}-moon-waning-gibbous-1:before { content: @moon-waning-gibbous-1 ; }
.@{weather-icons-prefix}-moon-waning-gibbous-2:before { content: @moon-waning-gibbous-2 ; }
.@{weather-icons-prefix}-moon-waning-gibbous-3:before { content: @moon-waning-gibbous-3 ; }
.@{weather-icons-prefix}-moon-waning-gibbous-4:before { content: @moon-waning-gibbous-4 ; }
.@{weather-icons-prefix}-moon-waning-gibbous-5:before { content: @moon-waning-gibbous-5 ; }
.@{weather-icons-prefix}-moon-waning-gibbous-6:before { content: @moon-waning-gibbous-6 ; }
.@{weather-icons-prefix}-moon-3rd-quarter:before { content: @moon-3rd-quarter ; }
.@{weather-icons-prefix}-moon-waning-crescent-1:before { content: @moon-waning-crescent-1 ; }
.@{weather-icons-prefix}-moon-waning-crescent-2:before { content: @moon-waning-crescent-2 ; }
.@{weather-icons-prefix}-moon-waning-crescent-3:before { content: @moon-waning-crescent-3 ; }
.@{weather-icons-prefix}-moon-waning-crescent-4:before { content: @moon-waning-crescent-4 ; }
.@{weather-icons-prefix}-moon-waning-crescent-5:before { content: @moon-waning-crescent-5 ; }
.@{weather-icons-prefix}-moon-waning-crescent-6:before { content: @moon-waning-crescent-6 ; }

389
less/weather-icons-variables.less
View File

@ -1,208 +1,187 @@
// Base Variables // Base Variables
@weather-icons-path: "../font"; @wi-path: "../font";
@WeatherIconVersion: "1.3.0"; @wi-version: "2.0";
@weather-icons-prefix: wi; @wi-css-prefix: wi;
@weather-icons-font-family: weathericons; @wi-font-family: weathericons;
// Glyph Names //Glyph Names
@day-cloudy-gusts: "\f000";
@day-cloudy-windy: "\f001";
@day-cloudy: "\f002";
@day-fog: "\f003";
@day-hail: "\f004";
@day-lightning: "\f005";
@day-rain-mix: "\f006";
@day-rain-wind: "\f007";
@day-rain: "\f008";
@day-showers: "\f009";
@day-snow: "\f00a";
@day-sprinkle: "\f00b";
@day-sunny-overcast: "\f00c";
@day-sunny: "\f00d";
@day-storm-showers: "\f00e";
@day-thunderstorm: "\f010";
@cloudy-gusts: "\f011";
@cloudy-windy: "\f012";
@cloudy: "\f013";
@fog: "\f014";
@hail: "\f015";
@lightning: "\f016";
@rain-mix: "\f017";
@rain-wind: "\f018";
@rain: "\f019";
@showers: "\f01a";
@snow: "\f01b";
@sprinkle: "\f01c";
@storm-showers: "\f01d";
@thunderstorm: "\f01e";
@windy: "\f021";
@night-alt-cloudy-gusts: "\f022";
@night-alt-cloudy-windy: "\f023";
@night-alt-hail: "\f024";
@night-alt-lightning: "\f025";
@night-alt-rain-mix: "\f026";
@night-alt-rain-wind: "\f027";
@night-alt-rain: "\f028";
@night-alt-showers: "\f029";
@night-alt-snow: "\f02a";
@night-alt-sprinkle: "\f02b";
@night-alt-storm-showers: "\f02c";
@night-alt-thunderstorm: "\f02d";
@night-clear: "\f02e";
@night-cloudy-gusts: "\f02f";
@night-cloudy-windy: "\f030";
@night-cloudy: "\f031";
@night-hail: "\f032";
@night-lightning: "\f033";
@night-rain-mix: "\f034";
@night-rain-wind: "\f035";
@night-rain: "\f036";
@night-showers: "\f037";
@night-snow: "\f038";
@night-sprinkle: "\f039";
@night-storm-showers: "\f03a";
@night-thunderstorm: "\f03b";
@celsius: "\f03c";
@cloud-down: "\f03d";
@cloud-refresh: "\f03e";
@cloud-up: "\f040";
@cloud: "\f041";
@degrees: "\f042";
@down-left: "\f043";
@down: "\f044";
@fahrenheit: "\f045";
@horizon-alt: "\f046";
@horizon: "\f047";
@left: "\f048";
@_reserved_: "\f049";
@night-fog: "\f04a";
@refresh-alt: "\f04b";
@refresh: "\f04c";
@right: "\f04d";
@sprinkles: "\f04e";
@strong-wind: "\f050";
@sunrise: "\f051";
@sunset: "\f052";
@thermometer-exterior: "\f053";
@thermometer-internal: "\f054";
@thermometer: "\f055";
@tornado: "\f056";
@up-right: "\f057";
@up: "\f058";
@wind-west: "\f059";
@wind-south-west: "\f05a";
@wind-south-east: "\f05b";
@wind-south: "\f05c";
@wind-north-west: "\f05d";
@wind-north-east: "\f05e";
@wind-north: "\f060";
@wind-east: "\f061";
// New v1.2
@smoke: "\f062";
@dust: "\f063";
@snow-wind: "\f064";
@day-snow-wind: "\f065";
@night-snow-wind: "\f066";
@night-alt-snow-wind: "\f067";
@day-sleet-storm: "\f068";
@night-sleet-storm: "\f069";
@night-alt-sleet-storm: "\f06a";
@day-snow-thunderstorm: "\f06b";
@night-snow-thunderstorm: "\f06c";
@night-alt-snow-thunderstorm: "\f06d";
@solar-eclipse: "\f06e";
@lunar-eclipse: "\f070";
@meteor: "\f071";
@hot: "\f072";
@hurricane: "\f073";
@smog: "\f074";
@alien: "\f075";
@snowflake-cold: "\f076";
@stars: "\f077";
// Moon Phases
//@old-moon-full: "\f078";
//@old-moon-waxing-gibbous: "\f079";
//@old-moon-waxing-quarter: "\f07a";
//@old-moon-waxing-crescent: "\f07b";
//@old-moon-young: "\f07c";
//@old-moon-new: "\f07d";
//@old-moon-old: "\f07e";
//@old-moon-waning-crescent: "\f080";
//@old-moon-waning-quarter: "\f081";
//@old-moon-waning-gibbous: "\f082";
// More new v1.2
@night-partly-cloudy: "\f083";
// New 1.3 11-30-14
@umbrella :"\f084";
@day-windy :"\f085";
@night-alt-cloudy :"\f086";
@up-left :"\f087";
@down-right :"\f088";
@time-12 :"\f089";
@time-1 :"\f08a";
@time-2 :"\f08b";
@time-3 :"\f08c";
@time-4 :"\f08d";
@time-5 :"\f08e";
@time-6 :"\f08f";
@time-7 :"\f090";
@time-8 :"\f091";
@time-9 :"\f092";
@time-10 :"\f093";
@time-11 :"\f094";
// Moon Phases
@moon-new :"\f095";
@moon-waxing-cresent-1 :"\f096";
@moon-waxing-cresent-2 :"\f097";
@moon-waxing-cresent-3 :"\f098";
@moon-waxing-cresent-4 :"\f099";
@moon-waxing-cresent-5 :"\f09a";
@moon-waxing-cresent-6 :"\f09b";
@moon-first-quarter :"\f09c";
@moon-waxing-gibbous-1 :"\f09d";
@moon-waxing-gibbous-2 :"\f09e";
@moon-waxing-gibbous-3 :"\f09f";
@moon-waxing-gibbous-4 :"\f0a0";
@moon-waxing-gibbous-5 :"\f0a1";
@moon-waxing-gibbous-6 :"\f0a2";
@moon-full :"\f0a3";
@moon-waning-gibbous-1 :"\f0a4";
@moon-waning-gibbous-2 :"\f0a5";
@moon-waning-gibbous-3 :"\f0a6";
@moon-waning-gibbous-4 :"\f0a7";
@moon-waning-gibbous-5 :"\f0a8";
@moon-waning-gibbous-6 :"\f0a9";
@moon-3rd-quarter :"\f0aa";
@moon-waning-crescent-1 :"\f0ab";
@moon-waning-crescent-2 :"\f0ac";
@moon-waning-crescent-3 :"\f0ad";
@moon-waning-crescent-4 :"\f0ae";
@moon-waning-crescent-5 :"\f0af";
@moon-waning-crescent-6 :"\f0b0";
//
@wind-default :"\f0b1";
@day-sleet :"\f0b2";
@night-sleet :"\f0b3";
@night-alt-sleet :"\f0b4";
@sleet :"\f0b5";
@day-haze :"\f0b6";
@beafort-0 :"\f0b7";
@beafort-1 :"\f0b8";
@beafort-2 :"\f0b9";
@beafort-3 :"\f0ba";
@beafort-4 :"\f0bb";
@beafort-5 :"\f0bc";
@beafort-6 :"\f0bd";
@beafort-7 :"\f0be";
@beafort-8 :"\f0bf";
@beafort-9 :"\f0c0";
@beafort-10 :"\f0c1";
@beafort-11 :"\f0c2";
@beafort-12 :"\f0c3";
@wi-icon-glyphs:
"_reserved_" "\f049",
"alien" "\f075",
"celsius" "\f03c",
"cloud" "\f041",
"cloud-down" "\f03d",
"cloud-refresh" "\f03e",
"cloud-up" "\f040",
"cloudy" "\f013",
"cloudy-gusts" "\f011",
"cloudy-windy" "\f012",
"day-cloudy" "\f002",
"day-cloudy-gusts" "\f000",
"day-cloudy-windy" "\f001",
"day-fog" "\f003",
"day-hail" "\f004",
"day-haze" "\f0b6",
"day-lightning" "\f005",
"day-rain" "\f008",
"day-rain-mix" "\f006",
"day-rain-wind" "\f007",
"day-showers" "\f009",
"day-sleet" "\f0b2",
"day-sleet-storm" "\f068",
"day-snow" "\f00a",
"day-snow-thunderstorm" "\f06b",
"day-snow-wind" "\f065",
"day-sprinkle" "\f00b",
"day-storm-showers" "\f00e",
"day-sunny" "\f00d",
"day-sunny-overcast" "\f00c",
"day-thunderstorm" "\f010",
"day-windy" "\f085",
"degrees" "\f042",
"direction-down" "\f044",
"direction-down-left" "\f043",
"direction-down-right" "\f088",
"direction-left" "\f048",
"direction-right" "\f04d",
"direction-up" "\f058",
"direction-up-left" "\f087",
"direction-up-right" "\f057",
"dust" "\f063",
"fahrenheit" "\f045",
"fog" "\f014",
"hail" "\f015",
"horizon" "\f047",
"horizon-alt" "\f046",
"hot" "\f072",
"hurricane" "\f073",
"lightning" "\f016",
"lunar-eclipse" "\f070",
"meteor" "\f071",
"moon-3rd-quarter" "\f0aa",
"moon-first-quarter" "\f09c",
"moon-full" "\f0a3",
"moon-new" "\f095",
"moon-waning-crescent-1" "\f0ab",
"moon-waning-crescent-2" "\f0ac",
"moon-waning-crescent-3" "\f0ad",
"moon-waning-crescent-4" "\f0ae",
"moon-waning-crescent-5" "\f0af",
"moon-waning-crescent-6" "\f0b0",
"moon-waning-gibbous-1" "\f0a4",
"moon-waning-gibbous-2" "\f0a5",
"moon-waning-gibbous-3" "\f0a6",
"moon-waning-gibbous-4" "\f0a7",
"moon-waning-gibbous-5" "\f0a8",
"moon-waning-gibbous-6" "\f0a9",
"moon-waxing-cresent-1" "\f096",
"moon-waxing-cresent-2" "\f097",
"moon-waxing-cresent-3" "\f098",
"moon-waxing-cresent-4" "\f099",
"moon-waxing-cresent-5" "\f09a",
"moon-waxing-cresent-6" "\f09b",
"moon-waxing-gibbous-1" "\f09d",
"moon-waxing-gibbous-2" "\f09e",
"moon-waxing-gibbous-3" "\f09f",
"moon-waxing-gibbous-4" "\f0a0",
"moon-waxing-gibbous-5" "\f0a1",
"moon-waxing-gibbous-6" "\f0a2",
"night-alt-cloudy" "\f086",
"night-alt-cloudy-gusts" "\f022",
"night-alt-cloudy-windy" "\f023",
"night-alt-hail" "\f024",
"night-alt-lightning" "\f025",
"night-alt-rain" "\f028",
"night-alt-rain-mix" "\f026",
"night-alt-rain-wind" "\f027",
"night-alt-showers" "\f029",
"night-alt-sleet" "\f0b4",
"night-alt-sleet-storm" "\f06a",
"night-alt-snow" "\f02a",
"night-alt-snow-thunderstorm" "\f06d",
"night-alt-snow-wind" "\f067",
"night-alt-sprinkle" "\f02b",
"night-alt-storm-showers" "\f02c",
"night-alt-thunderstorm" "\f02d",
"night-clear" "\f02e",
"night-cloudy" "\f031",
"night-cloudy-gusts" "\f02f",
"night-cloudy-windy" "\f030",
"night-fog" "\f04a",
"night-hail" "\f032",
"night-lightning" "\f033",
"night-partly-cloudy" "\f083",
"night-rain" "\f036",
"night-rain-mix" "\f034",
"night-rain-wind" "\f035",
"night-showers" "\f037",
"night-sleet" "\f0b3",
"night-sleet-storm" "\f069",
"night-snow" "\f038",
"night-snow-thunderstorm" "\f06c",
"night-snow-wind" "\f066",
"night-sprinkle" "\f039",
"night-storm-showers" "\f03a",
"night-thunderstorm" "\f03b",
"rain" "\f019",
"rain-mix" "\f017",
"rain-wind" "\f018",
"refresh" "\f04c",
"refresh-alt" "\f04b",
"showers" "\f01a",
"sleet" "\f0b5",
"smog" "\f074",
"smoke" "\f062",
"snow" "\f01b",
"snow-wind" "\f064",
"snowflake-cold" "\f076",
"solar-eclipse" "\f06e",
"sprinkle" "\f01c",
"sprinkles" "\f04e",
"stars" "\f077",
"storm-showers" "\f01d",
"strong-wind" "\f050",
"sunrise" "\f051",
"sunset" "\f052",
"thermometer" "\f055",
"thermometer-exterior" "\f053",
"thermometer-internal" "\f054",
"thunderstorm" "\f01e",
"time-1" "\f08a",
"time-10" "\f093",
"time-11" "\f094",
"time-12" "\f089",
"time-2" "\f08b",
"time-3" "\f08c",
"time-4" "\f08d",
"time-5" "\f08e",
"time-6" "\f08f",
"time-7" "\f090",
"time-8" "\f091",
"time-9" "\f092",
"tornado" "\f056",
"umbrella" "\f084",
"wind-beaufort-0" "\f0b7",
"wind-beaufort-1" "\f0b8",
"wind-beaufort-2" "\f0b9",
"wind-beaufort-3" "\f0ba",
"wind-beaufort-4" "\f0bb",
"wind-beaufort-5" "\f0bc",
"wind-beaufort-6" "\f0bd",
"wind-beaufort-7" "\f0be",
"wind-beaufort-8" "\f0bf",
"wind-beaufort-9" "\f0c0",
"wind-beaufort-10" "\f0c1",
"wind-beaufort-11" "\f0c2",
"wind-beaufort-12" "\f0c3",
"wind-default" "\f0b1",
"wind-east" "\f061",
"wind-north" "\f060",
"wind-north-east" "\f05e",
"wind-north-west" "\f05d",
"wind-south" "\f05c",
"wind-south-east" "\f05b",
"wind-south-west" "\f05a",
"wind-west" "\f059",
"windy" "\f021";

4
less/weather-icons.less
View File

@ -8,7 +8,7 @@
* *
* License * License
* ------------------------------------------------------------------------------ * ------------------------------------------------------------------------------
* - Fpmt licensed under SIL OFL 1.1 - * - Font licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL * http://scripts.sil.org/OFL
* - CSS and LESS are licensed under MIT License - * - CSS and LESS are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html * http://opensource.org/licenses/mit-license.html
@ -23,7 +23,7 @@
* Twitter: http://twitter.com/Erik_UX * Twitter: http://twitter.com/Erik_UX
*/ */
@import "weather-icons-variables.less"; @import "weather-icons-variables.less";

7
sass/weather-icons-classes.scss
View File

@ -19,11 +19,12 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
// icon definitions
// --------------------------
// create icon definitions
@each $wi-glyph-name, $wi-glyph-content in $wi-icon-glyphs { @each $wi-glyph-name, $wi-glyph-content in $wi-icon-glyphs {
.#{$wi-css-prefix}-#{$wi-glyph-name}:before { .#{$wi-css-prefix}-#{$wi-glyph-name}:before {
content: $wi-glyph-content; content: $wi-glyph-content;
} }
} }

3
sass/weather-icons-variables.scss
View File

@ -184,5 +184,4 @@ $wi-icon-glyphs: (
"beafort-9": "\f0c0", "beafort-9": "\f0c0",
"beafort-10": "\f0c1", "beafort-10": "\f0c1",
"beafort-11": "\f0c2", "beafort-11": "\f0c2",
"beafort-12": "\f0c3" "beafort-12": "\f0c3")
)

3
sass/weather-icons.scss
View File

@ -8,7 +8,7 @@
* *
* License * License
* ------------------------------------------------------------------------------ * ------------------------------------------------------------------------------
* - Fpmt licensed under SIL OFL 1.1 - * - Font licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL * http://scripts.sil.org/OFL
* - CSS and LESS are licensed under MIT License - * - CSS and LESS are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html * http://opensource.org/licenses/mit-license.html
@ -31,4 +31,3 @@