- updating index page with more instructions

- fixing EDN files to put semicolon after all sass variable files
- updating font files all over
- updating to 222 icons
2.1.0-wip
Erik Flowers 9 years ago
parent 5a6c79e5eb
commit f7f6810f3e

@ -11,7 +11,7 @@
:before "" :before ""
:join ";\n" :join ";\n"
:row [\$ label \: " " \" \\ code \"] :row [\$ label \: " " \" \\ code \"]
:after "\n"} :after ";"}
{:name "../less/icon-classes/classes-beaufort.less" {:name "../less/icon-classes/classes-beaufort.less"

@ -26,7 +26,7 @@ moon-waning-crescent-3, f0ad
moon-waning-crescent-4, f0ae moon-waning-crescent-4, f0ae
moon-waning-crescent-5, f0af moon-waning-crescent-5, f0af
moon-waning-crescent-6, f0b0 moon-waning-crescent-6, f0b0
moon-alt-new, f0cf moon-alt-new, f0eb
moon-alt-waxing-cresent-1, f0d0 moon-alt-waxing-cresent-1, f0d0
moon-alt-waxing-cresent-2, f0d1 moon-alt-waxing-cresent-2, f0d1
moon-alt-waxing-cresent-3, f0d2 moon-alt-waxing-cresent-3, f0d2

1 moon-new f095
26 moon-waning-crescent-4 f0ae
27 moon-waning-crescent-5 f0af
28 moon-waning-crescent-6 f0b0
29 moon-alt-new f0cf f0eb
30 moon-alt-waxing-cresent-1 f0d0
31 moon-alt-waxing-cresent-2 f0d1
32 moon-alt-waxing-cresent-3 f0d2

@ -11,7 +11,7 @@
:before "" :before ""
:join ";\n" :join ";\n"
:row [\$ label \: " " \" \\ code \"] :row [\$ label \: " " \" \\ code \"]
:after "\n"} :after ";"}
{:name "../less/icon-classes/classes-day.less" {:name "../less/icon-classes/classes-day.less"

@ -11,7 +11,7 @@
:before "" :before ""
:join ";\n" :join ";\n"
:row [\$ label \: " " \" \\ code \"] :row [\$ label \: " " \" \\ code \"]
:after "\n"} :after ";"}
{:name "../less/icon-classes/classes-direction.less" {:name "../less/icon-classes/classes-direction.less"

@ -11,7 +11,7 @@
:before "" :before ""
:join ";\n" :join ";\n"
:row [\$ label \: " " \" \\ code \"] :row [\$ label \: " " \" \\ code \"]
:after "\n"} :after ";"}
{:name "../less/icon-classes/classes-misc.less" {:name "../less/icon-classes/classes-misc.less"

@ -11,7 +11,7 @@
:before "" :before ""
:join ";\n" :join ";\n"
:row [\$ label \: " " \" \\ code \"] :row [\$ label \: " " \" \\ code \"]
:after "\n"} :after ";"}
{:name "../less/icon-classes/classes-neutral.less" {:name "../less/icon-classes/classes-neutral.less"

@ -11,7 +11,7 @@
:before "" :before ""
:join ";\n" :join ";\n"
:row [\$ label \: " " \" \\ code \"] :row [\$ label \: " " \" \\ code \"]
:after "\n"} :after ";"}
{:name "../less/icon-classes/classes-night.less" {:name "../less/icon-classes/classes-night.less"

@ -11,7 +11,7 @@
:before "" :before ""
:join ";\n" :join ";\n"
:row [\$ label \: " " \" \\ code \"] :row [\$ label \: " " \" \\ code \"]
:after "\n"} :after ";"}
{:name "../less/icon-classes/classes-time.less" {:name "../less/icon-classes/classes-time.less"

@ -31250,7 +31250,6 @@ unicode = F0CE;
}, },
{ {
glyphname = unif0cf; glyphname = unif0cf;
lastChange = "2015-08-18 18:53:56 +0000";
layers = ( layers = (
{ {
layerId = "8BEE18A2-62EC-4A69-8B77-4987BEDA7528"; layerId = "8BEE18A2-62EC-4A69-8B77-4987BEDA7528";
@ -31259,18 +31258,46 @@ paths = (
{ {
closed = 1; closed = 1;
nodes = ( nodes = (
"1044 1345 OFFCURVE", "180 728 LINE",
"1345 1044 OFFCURVE", "978 728 LINE",
"1345 673 CURVE SMOOTH", "978 1344 LINE",
"1345 301 OFFCURVE", "180 1344 LINE"
"1044 0 OFFCURVE", );
"673 0 CURVE SMOOTH", },
"301 0 OFFCURVE", {
"0 301 OFFCURVE", closed = 1;
"0 673 CURVE SMOOTH", nodes = (
"0 1044 OFFCURVE", "401 915 LINE",
"301 1345 OFFCURVE", "401 1149 LINE",
"673 1345 CURVE SMOOTH" "756 1149 LINE",
"756 915 LINE"
);
},
{
closed = 1;
nodes = (
"0 -256 LINE",
"106 -256 LINE",
"106 1344 LINE",
"0 1344 LINE"
);
},
{
closed = 1;
nodes = (
"180 31 LINE",
"978 31 LINE",
"978 647 LINE",
"180 647 LINE"
);
},
{
closed = 1;
nodes = (
"401 218 LINE",
"401 452 LINE",
"756 452 LINE",
"756 218 LINE"
); );
} }
); );
@ -32611,6 +32638,7 @@ unicode = F0E9;
}, },
{ {
glyphname = unif0ea; glyphname = unif0ea;
lastChange = "2015-08-18 21:22:57 +0000";
layers = ( layers = (
{ {
layerId = "8BEE18A2-62EC-4A69-8B77-4987BEDA7528"; layerId = "8BEE18A2-62EC-4A69-8B77-4987BEDA7528";
@ -32655,6 +32683,37 @@ width = 1345;
} }
); );
unicode = F0EA; unicode = F0EA;
},
{
glyphname = unif0eb;
lastChange = "2015-08-18 21:24:59 +0000";
layers = (
{
layerId = "8BEE18A2-62EC-4A69-8B77-4987BEDA7528";
name = Regular;
paths = (
{
closed = 1;
nodes = (
"1044 1345 OFFCURVE",
"1345 1044 OFFCURVE",
"1345 673 CURVE SMOOTH",
"1345 301 OFFCURVE",
"1044 0 OFFCURVE",
"673 0 CURVE SMOOTH",
"301 0 OFFCURVE",
"0 301 OFFCURVE",
"0 673 CURVE SMOOTH",
"0 1044 OFFCURVE",
"301 1345 OFFCURVE",
"673 1345 CURVE SMOOTH"
);
}
);
width = 1345;
}
);
unicode = F0EB;
} }
); );
instances = ( instances = (

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Weather Icons - 215 font icons inspired by Font Awesome and designed for Bootstrap</title> <title>Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap</title>
<!-- favicons--> <!-- favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">

@ -9043,7 +9043,6 @@ header .icon .icon-box {
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100; font-weight: 100;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 30px;
color: #9667a2; color: #9667a2;
line-height: 1.3em; line-height: 1.3em;
font-size: 25px; font-size: 25px;
@ -9053,6 +9052,9 @@ header .icon .icon-box {
font-size: 40px; font-size: 40px;
} }
} }
.icon-set {
margin-bottom: 20px;
}
.new-icons ul { .new-icons ul {
list-style: none; list-style: none;
} }
@ -9065,9 +9067,36 @@ header .icon .icon-box {
font-size: 20px; font-size: 20px;
} }
.instructions { .instructions {
margin-bottom: 10px; margin-bottom: 30px;
border-left: 10px solid rgba(146, 77, 163, 0.5); padding: 15px 20px;
padding-left: 20px; border-radius: 10px;
color: #924da3;
text-shadow: 0px 1px 0px #ffffff;
background-color: rgba(146, 77, 163, 0.1);
}
.instructions:before,
.instructions:after {
content: " ";
display: table;
}
.instructions:after {
clear: both;
}
.instructions:before,
.instructions:after {
content: " ";
display: table;
}
.instructions:after {
clear: both;
}
.instructions .info-icon {
float: left;
font-size: 30px;
width: 40px;
}
.instructions p {
margin-left: 42px;
} }
.intro { .intro {
font-size: 18px; font-size: 18px;

@ -553,7 +553,7 @@
content: "\f0b0"; content: "\f0b0";
} }
.wi-moon-alt-new:before { .wi-moon-alt-new:before {
content: "\f0cf"; content: "\f0eb";
} }
.wi-moon-alt-waxing-cresent-1:before { .wi-moon-alt-waxing-cresent-1:before {
content: "\f0d0"; content: "\f0d0";

File diff suppressed because one or more lines are too long

@ -224,7 +224,7 @@
<glyph unicode="&#xf0cc;" horiz-adv-x="1107" d="M0 -293v1829h110v-1829h-110zM184 746v790l923 -394z" /> <glyph unicode="&#xf0cc;" horiz-adv-x="1107" d="M0 -293v1829h110v-1829h-110zM184 746v790l923 -394z" />
<glyph unicode="&#xf0cd;" horiz-adv-x="923" d="M0 -293v1829h110v-1829h-110zM184 -63v790l923 -394zM184 746v790l923 -394z" /> <glyph unicode="&#xf0cd;" horiz-adv-x="923" d="M0 -293v1829h110v-1829h-110zM184 -63v790l923 -394zM184 746v790l923 -394z" />
<glyph unicode="&#xf0ce;" horiz-adv-x="1117" d="M0 -293v1829h121v-1829h-121zM206 832v704h912v-704h-912zM458 1046h406v267h-406v-267z" /> <glyph unicode="&#xf0ce;" horiz-adv-x="1117" d="M0 -293v1829h121v-1829h-121zM206 832v704h912v-704h-912zM458 1046h406v267h-406v-267z" />
<glyph unicode="&#xf0cf;" d="M0 769q0 -209 103 -386t280 -280t386 -103t385.5 103t279.5 280t103 386t-103 385.5t-279.5 279.5t-385.5 103t-386 -103t-280 -279.5t-103 -385.5z" /> <glyph unicode="&#xf0cf;" d="M0 -293v1829h121v-1829h-121zM206 35v704h912v-704h-912zM206 832v704h912v-704h-912zM458 249h406v268h-406v-268zM458 1046h406v267h-406v-267z" />
<glyph unicode="&#xf0d0;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM863 1449q168 -92 275.5 -266.5t107.5 -413.5q0 -502 -352 -675q241 45 401 235t160 440 q0 170 -78 318t-213.5 243.5t-300.5 118.5z" /> <glyph unicode="&#xf0d0;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM863 1449q168 -92 275.5 -266.5t107.5 -413.5q0 -502 -352 -675q241 45 401 235t160 440 q0 170 -78 318t-213.5 243.5t-300.5 118.5z" />
<glyph unicode="&#xf0d1;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM830 1453q152 -101 249 -276.5t97 -407.5q0 -492 -327 -682q169 20 307.5 115t218.5 244.5 t80 322.5q0 176 -83 328t-226 246.5t-316 109.5z" /> <glyph unicode="&#xf0d1;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM830 1453q152 -101 249 -276.5t97 -407.5q0 -492 -327 -682q169 20 307.5 115t218.5 244.5 t80 322.5q0 176 -83 328t-226 246.5t-316 109.5z" />
<glyph unicode="&#xf0d2;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM808 1454q131 -113 214 -288t83 -397q0 -475 -284 -686q131 10 248 68t202 149t134.5 213.5 t49.5 255.5q0 179 -86 333.5t-235 248.5t-326 103z" /> <glyph unicode="&#xf0d2;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM808 1454q131 -113 214 -288t83 -397q0 -475 -284 -686q131 10 248 68t202 149t134.5 213.5 t49.5 255.5q0 179 -86 333.5t-235 248.5t-326 103z" />
@ -252,5 +252,6 @@
<glyph unicode="&#xf0e8;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -136 51.5 -260t138.5 -215t208 -148t255 -64q-127 122 -178.5 294t-51.5 393 q0 198 63 378.5t175 307.5q-181 -7 -333 -100.5t-240 -249t-88 -336.5z" /> <glyph unicode="&#xf0e8;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -136 51.5 -260t138.5 -215t208 -148t255 -64q-127 122 -178.5 294t-51.5 393 q0 198 63 378.5t175 307.5q-181 -7 -333 -100.5t-240 -249t-88 -336.5z" />
<glyph unicode="&#xf0e9;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -130 47.5 -250t129 -210t194.5 -149.5t240 -73.5q-179 106 -252.5 278t-73.5 405 q0 212 90 394.5t250 289.5q-129 -11 -245 -69.5t-199 -149.5t-132 -212t-49 -253z" /> <glyph unicode="&#xf0e9;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -130 47.5 -250t129 -210t194.5 -149.5t240 -73.5q-179 106 -252.5 278t-73.5 405 q0 212 90 394.5t250 289.5q-129 -11 -245 -69.5t-199 -149.5t-132 -212t-49 -253z" />
<glyph unicode="&#xf0ea;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -254 164.5 -446t411.5 -233q-103 51 -175 124t-111.5 162t-57 184t-17.5 209 q0 216 102 398.5t281 281.5q-167 -21 -303.5 -116t-215.5 -244t-79 -320z" /> <glyph unicode="&#xf0ea;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -254 164.5 -446t411.5 -233q-103 51 -175 124t-111.5 162t-57 184t-17.5 209 q0 216 102 398.5t281 281.5q-167 -21 -303.5 -116t-215.5 -244t-79 -320z" />
<glyph unicode="&#xf0eb;" d="M0 769q0 -209 103 -386t280 -280t386 -103t385.5 103t279.5 280t103 386t-103 385.5t-279.5 279.5t-385.5 103t-386 -103t-280 -279.5t-103 -385.5z" />
</font> </font>
</defs></svg> </defs></svg>

Before

Width:  |  Height:  |  Size: 180 KiB

After

Width:  |  Height:  |  Size: 181 KiB

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Weather Icons - 215 font icons inspired by Font Awesome and designed for Bootstrap</title> <title>Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap</title>
<!-- favicons--> <!-- favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<h1>Weather Icons</h1> <h1>Weather Icons</h1>
<h2>215 Weather Themed Icons and CSS</h2><a href="https://github.com/erikflowers/weather-icons/archive/master.zip" class="download-now">Download Now <i class="wi wi-sunset"></i></a> <h2>222 Weather Themed Icons and CSS</h2><a href="https://github.com/erikflowers/weather-icons/archive/master.zip" class="download-now">Download Now <i class="wi wi-sunset"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -54,7 +54,7 @@
<li> <li>
<iframe src="https://ghbtns.com/github-btn.html?user=erikflowers&amp;repo=weather-icons&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px" class="github-btn"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=erikflowers&amp;repo=weather-icons&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px" class="github-btn"></iframe>
</li> </li>
<li><a href="https://twitter.com/share" data-lang="en" data-text="Weather Icons - 215 weather themed font icons!" data-via="Erik_UX" data-count="none" class="twitter-share-button">Tweet</a></li> <li><a href="https://twitter.com/share" data-lang="en" data-text="Weather Icons - 222 weather themed font icons!" data-via="Erik_UX" data-count="none" class="twitter-share-button">Tweet</a></li>
<li><a href="https://twitter.com/Erik_UX" data-show-count="false" data-lang="en" class="twitter-follow-button">Follow @Erik_UX</a> <li><a href="https://twitter.com/Erik_UX" data-show-count="false" data-lang="en" class="twitter-follow-button">Follow @Erik_UX</a>
<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");
@ -72,12 +72,12 @@
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="intro-icons"><i class="wi wi-day-lightning"></i><i class="wi wi-night-thunderstorm"></i><i class="wi wi-day-snow"></i><i class="wi wi-sprinkle"></i><i class="wi wi-day-sunny"></i><i class="wi wi-cloudy"></i><i class="wi wi-night-rain-mix"></i><i class="wi wi-sunset"></i><i class="wi wi-sunrise"></i><i class="wi wi-day-cloudy-windy"></i><i class="wi wi-night-rain"></i><i class="wi wi-night-alt-snow"></i></div> <div class="intro-icons"><i class="wi wi-day-lightning"></i><i class="wi wi-night-thunderstorm"></i><i class="wi wi-day-snow"></i><i class="wi wi-sprinkle"></i><i class="wi wi-day-sunny"></i><i class="wi wi-cloudy"></i><i class="wi wi-night-rain-mix"></i><i class="wi wi-sunset"></i><i class="wi wi-sunrise"></i><i class="wi wi-day-cloudy-windy"></i><i class="wi wi-night-rain"></i><i class="wi wi-night-alt-snow"></i></div>
<p class="headline">Weather Icons is the only icon font and CSS with 215 weather themed icons, ready to be dropped right into <a href="http://getbootstrap.com">Bootstrap,</a> or any project that needs high quality weather, maritime, and meteorological based icons!</p> <p class="headline">Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into <a href="http://getbootstrap.com">Bootstrap,</a> or any project that needs high quality weather, maritime, and meteorological based icons!</p>
<div class="features"> <div class="features">
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<h3><i class="wi wi-day-sunny"></i>The Freedom of CSS</h3> <h3><i class="wi wi-day-sunny"></i>The Freedom of CSS</h3>
<p>Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! <i class="wi wi-night-thunderstorm wi-flip-vertical purple"></i><i class="wi wi-night-thunderstorm wi-flip-horizontal purple"></i><i class="wi wi-night-thunderstorm wi-rotate-90 purple"></i><i class="wi wi-night-thunderstorm wi-rotate-180 purple"></i><i class="wi wi-night-thunderstorm wi-rotate-270 purple"></i></p> <p>Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! </p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h3><i class="wi wi-lightning"></i>Use In Graphic Apps</h3> <h3><i class="wi wi-lightning"></i>Use In Graphic Apps</h3>
@ -85,13 +85,13 @@
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h3><i class="wi wi-night-rain"></i>Flip, Scale, Transform</h3> <h3><i class="wi wi-night-rain"></i>Flip, Scale, Transform</h3>
<p>Easily modify the icon look with built-in classes that make it easy.</p> <p>Easily modify the icon look with built-in utility classes for fixed-width, flip horizontal, flip vertical, and rotating 90, 180, or 270 degrees.<i class="wi wi-night-thunderstorm wi-flip-vertical purple"></i><i class="wi wi-night-thunderstorm wi-flip-horizontal purple"></i><i class="wi wi-night-thunderstorm wi-rotate-90 purple"></i><i class="wi wi-night-thunderstorm wi-rotate-180 purple"></i><i class="wi wi-night-thunderstorm wi-rotate-270 purple"></i></p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<h3><i class="wi wi-earthquake"></i>Popular Weather API Classes</h3> <h3><i class="wi wi-earthquake"></i>Popular Weather API Classes</h3>
<p>Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization.<a href="api-list.html">View the list of API mappings here.</a></p> <p>Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization. <a href="api-list.html">View the list of API mappings here.</a></p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h3><i class="wi wi-thunderstorm"></i>Specialty Icons</h3> <h3><i class="wi wi-thunderstorm"></i>Specialty Icons</h3>
@ -102,53 +102,11 @@
<p>Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.</p> <p>Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.</p>
</div> </div>
</div> </div>
<div class="row new-icons"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h3>25 New 2.0 Icons!</h3> <div class="section-title">Getting Started</div>
<div class="row"> <p>To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type <code>&lt;i class="wi wi-night-sleet"&gt;&lt;/i&gt;</code></p>
<div class="col-sm-3"> <p>Weather icons is also hosted on cdn.js, to use the CSS from there, just include:<br><code>https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.1/css/weather-icons.min.css</code></p>
<ul>
<li><i class="wi wi-day-cloudy-high"></i>day-cloudy-high</li>
<li><i class="wi wi-day-light-wind"></i>day-light-wind</li>
<li><i class="wi wi-day-sleet"></i>day-sleet</li>
<li><i class="wi wi-day-haze"></i>day-haze</li>
<li><i class="wi wi-night-cloudy-high"></i>night-cloud-high</li>
<li><i class="wi wi-night-alt-partly-cloudy"></i>night-alt-partly-cloudy</li>
<li><i class="wi wi-sleet"></i>sleet</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-moonrise"></i>moonrise</li>
<li><i class="wi wi-moonset"></i>moonset</li>
<li><i class="wi wi-night-sleet"></i>night-sleet</li>
<li><i class="wi wi-night-alt-sleet"></i>night-alt-sleet</li>
<li><i class="wi wi-raindrop"></i>raindrop</li>
<li><i class="wi wi-barometer"></i>barometer</li>
<li><i class="wi wi-humidity"></i>humidity</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-na"></i>na (no report)</li>
<li><i class="wi wi-flood"></i>flood</li>
<li><i class="wi wi-sandstorm"></i>sandstorm</li>
<li><i class="wi wi-tsunami"></i>tsunami</li>
<li><i class="wi wi-earthquake"></i>earthquake</li>
<li><i class="wi wi-fire"></i>fire</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-volcano"></i>volcano</li>
<li><i class="wi wi-train"></i>train</li>
<li><i class="wi wi-small-craft-advisory"></i>small-craft-advisory</li>
<li><i class="wi wi-gale-warning"></i>gale-warning</li>
<li><i class="wi wi-storm-warning"></i>storm-warning</li>
<li><i class="wi wi-hurricane-warning"></i>hurricane-warning</li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -157,8 +115,57 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row new-icons">
<div class="col-sm-12"> <div class="col-sm-12">
<h3>25 New 2.0 Icons!</h3>
<div class="row">
<div class="col-sm-3">
<ul>
<li><i class="wi wi-day-cloudy-high"></i>day-cloudy-high</li>
<li><i class="wi wi-day-light-wind"></i>day-light-wind</li>
<li><i class="wi wi-day-sleet"></i>day-sleet</li>
<li><i class="wi wi-day-haze"></i>day-haze</li>
<li><i class="wi wi-night-cloudy-high"></i>night-cloud-high</li>
<li><i class="wi wi-night-alt-partly-cloudy"></i>night-alt-partly-cloudy</li>
<li><i class="wi wi-sleet"></i>sleet</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-moonrise"></i>moonrise</li>
<li><i class="wi wi-moonset"></i>moonset</li>
<li><i class="wi wi-night-sleet"></i>night-sleet</li>
<li><i class="wi wi-night-alt-sleet"></i>night-alt-sleet</li>
<li><i class="wi wi-raindrop"></i>raindrop</li>
<li><i class="wi wi-barometer"></i>barometer</li>
<li><i class="wi wi-humidity"></i>humidity</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-na"></i>na (no report)</li>
<li><i class="wi wi-flood"></i>flood</li>
<li><i class="wi wi-sandstorm"></i>sandstorm</li>
<li><i class="wi wi-tsunami"></i>tsunami</li>
<li><i class="wi wi-earthquake"></i>earthquake</li>
<li><i class="wi wi-fire"></i>fire</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li><i class="wi wi-volcano"></i>volcano</li>
<li><i class="wi wi-train"></i>train</li>
<li><i class="wi wi-small-craft-advisory"></i>small-craft-advisory</li>
<li><i class="wi wi-gale-warning"></i>gale-warning</li>
<li><i class="wi wi-storm-warning"></i>storm-warning</li>
<li><i class="wi wi-hurricane-warning"></i>hurricane-warning</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 icon-set">
<div class="section-title">Daytime</div> <div class="section-title">Daytime</div>
<div class="row"> <div class="row">
<div class="icon-wrap"> <div class="icon-wrap">
@ -293,7 +300,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Nighttime</div> <div class="section-title">Nighttime</div>
<div class="row"> <div class="row">
<div class="icon-wrap"> <div class="icon-wrap">
@ -518,7 +525,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Neutral</div> <div class="section-title">Neutral</div>
<div class="row"> <div class="row">
<div class="icon-wrap"> <div class="icon-wrap">
@ -723,7 +730,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Miscellaneous</div> <div class="section-title">Miscellaneous</div>
<div class="row"> <div class="row">
<div class="icon-wrap"> <div class="icon-wrap">
@ -843,8 +850,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Moon Phases</div> <div class="section-title">Moon Phases</div>
<div class="instructions">
<div class="info-icon"><i class="fa fa-info-circle"></i></div>
<p>The moons are split into 28 icons, to correspond neatly with the 28 day moon cycle. There is a primary set and alternate set. The primary set is meant to be interpreted as: where there are pixels, that is the illuminated part of the moon. The alternate set is meant to be interpreted as: where there are pixels, that is the shadowed part of the moon.</p>
</div>
<div class="row"> <div class="row">
<div class="icon-wrap"> <div class="icon-wrap">
<div class="icon">&#xf095;</div> <div class="icon">&#xf095;</div>
@ -987,9 +998,9 @@
<div class="icon_unicode">f0b0 </div> <div class="icon_unicode">f0b0 </div>
</div> </div>
<div class="icon-wrap"> <div class="icon-wrap">
<div class="icon">&#xf0cf;</div> <div class="icon">&#xf0eb;</div>
<div class="icon-name">wi-moon-alt-new</div> <div class="icon-name">wi-moon-alt-new</div>
<div class="icon_unicode">f0cf </div> <div class="icon_unicode">f0eb </div>
</div> </div>
<div class="icon-wrap"> <div class="icon-wrap">
<div class="icon">&#xf0d0;</div> <div class="icon">&#xf0d0;</div>
@ -1128,7 +1139,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Time</div> <div class="section-title">Time</div>
<div class="row"> <div class="row">
<div class="icon-wrap"> <div class="icon-wrap">
@ -1193,7 +1204,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Directional Arrows</div> <div class="section-title">Directional Arrows</div>
<div class="row"> <div class="row">
<div class="icon-wrap"> <div class="icon-wrap">
@ -1238,9 +1249,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Wind Degree Examples</div> <div class="section-title">Wind Degree Examples</div>
<div class="instructions"> <div class="instructions">
<div class="info-icon"><i class="fa fa-info-circle"></i></div>
<p>The classes for the wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the degree, zero at the top. From points directly away from the degree. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-0-deg</code> class, or if you prefer to use from, then you would use <code>from-180-deg</code>.</p> <p>The classes for the wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the degree, zero at the top. From points directly away from the degree. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-0-deg</code> class, or if you prefer to use from, then you would use <code>from-180-deg</code>.</p>
<p>There are 360 classes for each in 1 degree increments for maximum precision.</p> <p>There are 360 classes for each in 1 degree increments for maximum precision.</p>
<p></p> <p></p>
@ -1376,9 +1388,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Wind Cardinal Examples</div> <div class="section-title">Wind Cardinal Examples</div>
<div class="instructions"> <div class="instructions">
<div class="info-icon"><i class="fa fa-info-circle"></i></div>
<p>The classes for the cardinal wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the direction in the class, north at the top. From points directly away from the direction in the class. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-n</code> class, or if you prefer to use from, then you would use <code>from-s</code>.</p> <p>The classes for the cardinal wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the direction in the class, north at the top. From points directly away from the direction in the class. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-n</code> class, or if you prefer to use from, then you would use <code>from-s</code>.</p>
<p>The purpose of this is to accommodate applications that prefer to point to where the wind is originating from (arrow points against the wind), or pointing where the wind is blowing (arrow points in direction of wind). You can decide which fits your application best and use the class that matches.</p> <p>The purpose of this is to accommodate applications that prefer to point to where the wind is originating from (arrow points against the wind), or pointing where the wind is blowing (arrow points in direction of wind). You can decide which fits your application best and use the class that matches.</p>
<p>There are 16 classes each for precision when using cardinal directions.</p> <p>There are 16 classes each for precision when using cardinal directions.</p>
@ -1515,7 +1528,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12 icon-set">
<div class="section-title">Beaufort Wind Scale</div> <div class="section-title">Beaufort Wind Scale</div>
<div class="row"> <div class="row">
<div class="icon-wrap"> <div class="icon-wrap">
@ -1586,10 +1599,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row-"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="section-title">Utility Classes</div> <div class="section-title">Utility Classes</div>
<div class="instructions"> <div class="instructions">
<div class="info-icon"><i class="fa fa-info-circle"></i></div>
<p>Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.</p> <p>Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.</p>
</div> </div>
<div class="row"> <div class="row">

@ -1,7 +1,7 @@
doctype doctype
html html
head head
title Weather Icons - 215 font icons inspired by Font Awesome and designed for Bootstrap title Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap
// favicons // favicons
link(rel='apple-touch-icon', sizes='57x57', href='/apple-touch-icon-57x57.png') link(rel='apple-touch-icon', sizes='57x57', href='/apple-touch-icon-57x57.png')
link(rel='apple-touch-icon', sizes='60x60', href='/apple-touch-icon-60x60.png') link(rel='apple-touch-icon', sizes='60x60', href='/apple-touch-icon-60x60.png')

@ -111,9 +111,9 @@
.icon-name wi-moon-waning-crescent-6 .icon-name wi-moon-waning-crescent-6
.icon_unicode f0b0 .icon_unicode f0b0
.icon-wrap .icon-wrap
.icon &#xf0cf; .icon &#xf0eb;
.icon-name wi-moon-alt-new .icon-name wi-moon-alt-new
.icon_unicode f0cf .icon_unicode f0eb
.icon-wrap .icon-wrap
.icon &#xf0d0; .icon &#xf0d0;
.icon-name wi-moon-alt-waxing-cresent-1 .icon-name wi-moon-alt-waxing-cresent-1

@ -1,49 +1,57 @@
.col-sm-12 .col-sm-12.icon-set
.section-title Daytime .section-title Daytime
.row .row
include icon-list-day include icon-list-day
.col-sm-12 .col-sm-12.icon-set
.section-title Nighttime .section-title Nighttime
.row .row
include icon-list-night include icon-list-night
.col-sm-12 .col-sm-12.icon-set
.section-title Neutral .section-title Neutral
.row .row
include icon-list-neutral include icon-list-neutral
.col-sm-12 .col-sm-12.icon-set
.section-title Miscellaneous .section-title Miscellaneous
.row .row
include icon-list-misc include icon-list-misc
.col-sm-12 .col-sm-12.icon-set
.section-title Moon Phases .section-title Moon Phases
.instructions
.info-icon
i.fa.fa-info-circle
p The moons are split into 28 icons, to correspond neatly with the 28 day moon cycle. There is a primary set and alternate set. The primary set is meant to be interpreted as: where there are pixels, that is the illuminated part of the moon. The alternate set is meant to be interpreted as: where there are pixels, that is the shadowed part of the moon.
.row .row
include icon-list-moon include icon-list-moon
.col-sm-12 .col-sm-12.icon-set
.section-title Time .section-title Time
.row .row
include icon-list-time include icon-list-time
.col-sm-12 .col-sm-12.icon-set
.section-title Directional Arrows .section-title Directional Arrows
.row .row
include icon-list-direction include icon-list-direction
.col-sm-12 .col-sm-12.icon-set
.section-title Wind Degree Examples .section-title Wind Degree Examples
.instructions .instructions
.info-icon
i.fa.fa-info-circle
p The classes for the wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the degree, zero at the top. From points directly away from the degree. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-0-deg</code> class, or if you prefer to use from, then you would use <code>from-180-deg</code>. p The classes for the wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the degree, zero at the top. From points directly away from the degree. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-0-deg</code> class, or if you prefer to use from, then you would use <code>from-180-deg</code>.
p There are 360 classes for each in 1 degree increments for maximum precision. p There are 360 classes for each in 1 degree increments for maximum precision.
p p
.row .row
include icon-list-wind include icon-list-wind
.col-sm-12 .col-sm-12.icon-set
.section-title Wind Cardinal Examples .section-title Wind Cardinal Examples
.instructions .instructions
.info-icon
i.fa.fa-info-circle
p The classes for the cardinal wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the direction in the class, north at the top. From points directly away from the direction in the class. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-n</code> class, or if you prefer to use from, then you would use <code>from-s</code>. p The classes for the cardinal wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the direction in the class, north at the top. From points directly away from the direction in the class. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-n</code> class, or if you prefer to use from, then you would use <code>from-s</code>.
p The purpose of this is to accommodate applications that prefer to point to where the wind is originating from (arrow points against the wind), or pointing where the wind is blowing (arrow points in direction of wind). You can decide which fits your application best and use the class that matches. p The purpose of this is to accommodate applications that prefer to point to where the wind is originating from (arrow points against the wind), or pointing where the wind is blowing (arrow points in direction of wind). You can decide which fits your application best and use the class that matches.
p There are 16 classes each for precision when using cardinal directions. p There are 16 classes each for precision when using cardinal directions.
p p
.row .row
include icon-list-wind-cardinal include icon-list-wind-cardinal
.col-sm-12 .col-sm-12.icon-set
.section-title Beaufort Wind Scale .section-title Beaufort Wind Scale
.row .row
include icon-list-beaufort include icon-list-beaufort

@ -1,7 +1,7 @@
doctype doctype
html html
head head
title Weather Icons - 215 font icons inspired by Font Awesome and designed for Bootstrap title Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap
// favicons // favicons
link(rel='apple-touch-icon', sizes='57x57', href='/apple-touch-icon-57x57.png') link(rel='apple-touch-icon', sizes='57x57', href='/apple-touch-icon-57x57.png')
link(rel='apple-touch-icon', sizes='60x60', href='/apple-touch-icon-60x60.png') link(rel='apple-touch-icon', sizes='60x60', href='/apple-touch-icon-60x60.png')
@ -38,7 +38,7 @@ html
.icon-box .icon-box
.wi.wi-day-cloudy .wi.wi-day-cloudy
h1 Weather Icons h1 Weather Icons
h2 215 Weather Themed Icons and CSS h2 222 Weather Themed Icons and CSS
a.download-now(href="https://github.com/erikflowers/weather-icons/archive/master.zip") Download Now a.download-now(href="https://github.com/erikflowers/weather-icons/archive/master.zip") Download Now
i.wi.wi-sunset i.wi.wi-sunset
section.social section.social
@ -52,7 +52,7 @@ html
li li
iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=fork&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='90px', height='20px') iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=fork&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='90px', height='20px')
li li
a.twitter-share-button(href='https://twitter.com/share', data-lang='en', data-text='Weather Icons - 215 weather themed font icons!', data-via='Erik_UX', data-count='none') Tweet a.twitter-share-button(href='https://twitter.com/share', data-lang='en', data-text='Weather Icons - 222 weather themed font icons!', data-via='Erik_UX', data-count='none') Tweet
li li
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.
@ -75,7 +75,7 @@ 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 the only icon font and CSS with 215 weather themed icons, ready to be dropped right into p.headline Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into
a(href="http://getbootstrap.com") Bootstrap, a(href="http://getbootstrap.com") Bootstrap,
| or any project that needs high quality weather, maritime, and meteorological based icons! | or any project that needs high quality weather, maritime, and meteorological based icons!
@ -87,12 +87,6 @@ html
i.wi.wi-day-sunny i.wi.wi-day-sunny
| The Freedom of CSS | The Freedom of CSS
p Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! p Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more!
i.wi.wi-night-thunderstorm.wi-flip-vertical.purple
i.wi.wi-night-thunderstorm.wi-flip-horizontal.purple
i.wi.wi-night-thunderstorm.wi-rotate-90.purple
i.wi.wi-night-thunderstorm.wi-rotate-180.purple
i.wi.wi-night-thunderstorm.wi-rotate-270.purple
.col-sm-4 .col-sm-4
h3 h3
i.wi.wi-lightning i.wi.wi-lightning
@ -102,13 +96,18 @@ html
h3 h3
i.wi.wi-night-rain i.wi.wi-night-rain
| Flip, Scale, Transform | Flip, Scale, Transform
p Easily modify the icon look with built-in classes that make it easy. p Easily modify the icon look with built-in utility classes for fixed-width, flip horizontal, flip vertical, and rotating 90, 180, or 270 degrees.
i.wi.wi-night-thunderstorm.wi-flip-vertical.purple
i.wi.wi-night-thunderstorm.wi-flip-horizontal.purple
i.wi.wi-night-thunderstorm.wi-rotate-90.purple
i.wi.wi-night-thunderstorm.wi-rotate-180.purple
i.wi.wi-night-thunderstorm.wi-rotate-270.purple
.row .row
.col-sm-4 .col-sm-4
h3 h3
i.wi.wi-earthquake i.wi.wi-earthquake
| Popular Weather API Classes | Popular Weather API Classes
p Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization. p Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, and World Meteorological Organization.
a(href="api-list.html") View the list of API mappings here. a(href="api-list.html") View the list of API mappings here.
.col-sm-4 .col-sm-4
h3 h3
@ -120,96 +119,14 @@ html
i.wi.wi-volcano.from-270-deg i.wi.wi-volcano.from-270-deg
| Less and Sass Support | Less and Sass Support
p Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds. p Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.
.row.new-icons .row
.col-sm-12 .col-sm-12
h3 25 New 2.0 Icons! .section-title Getting Started
.row p To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type
.col-sm-3 code &lt;i class="wi wi-night-sleet"&gt;&lt;/i&gt;
ul p Weather icons is also hosted on cdn.js, to use the CSS from there, just include:<br>
li code https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.1/css/weather-icons.min.css
i.wi.wi-day-cloudy-high
| day-cloudy-high
li
i.wi.wi-day-light-wind
| day-light-wind
li
i.wi.wi-day-sleet
| day-sleet
li
i.wi.wi-day-haze
| day-haze
li
i.wi.wi-night-cloudy-high
| night-cloud-high
li
i.wi.wi-night-alt-partly-cloudy
| night-alt-partly-cloudy
li
i.wi.wi-sleet
| sleet
.col-sm-3
ul
li
i.wi.wi-moonrise
| moonrise
li
i.wi.wi-moonset
| moonset
li
i.wi.wi-night-sleet
| night-sleet
li
i.wi.wi-night-alt-sleet
| night-alt-sleet
li
i.wi.wi-raindrop
| raindrop
li
i.wi.wi-barometer
| barometer
li
i.wi.wi-humidity
| humidity
.col-sm-3
ul
li
i.wi.wi-na
| na (no report)
li
i.wi.wi-flood
| flood
li
i.wi.wi-sandstorm
| sandstorm
li
i.wi.wi-tsunami
| tsunami
li
i.wi.wi-earthquake
| earthquake
li
i.wi.wi-fire
| fire
.col-sm-3
ul
li
i.wi.wi-volcano
| volcano
li
i.wi.wi-train
| train
li
i.wi.wi-small-craft-advisory
| small-craft-advisory
li
i.wi.wi-gale-warning
| gale-warning
li
i.wi.wi-storm-warning
| storm-warning
li
i.wi.wi-hurricane-warning
| hurricane-warning
.meta .meta
@ -218,13 +135,16 @@ html
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 on GitHub. a(href="https://github.com/erikflowers/weather-icons/issues") main repository on GitHub.
include new-icons
.row .row
include icon-list include icon-list
.row- .row
.col-sm-12 .col-sm-12
.section-title Utility Classes .section-title Utility Classes
.instructions .instructions
.info-icon
i.fa.fa-info-circle
p Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon. p Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.
.row .row
.col-sm-4 .col-sm-4

@ -0,0 +1,90 @@
.row.new-icons
.col-sm-12
h3 25 New 2.0 Icons!
.row
.col-sm-3
ul
li
i.wi.wi-day-cloudy-high
| day-cloudy-high
li
i.wi.wi-day-light-wind
| day-light-wind
li
i.wi.wi-day-sleet
| day-sleet
li
i.wi.wi-day-haze
| day-haze
li
i.wi.wi-night-cloudy-high
| night-cloud-high
li
i.wi.wi-night-alt-partly-cloudy
| night-alt-partly-cloudy
li
i.wi.wi-sleet
| sleet
.col-sm-3
ul
li
i.wi.wi-moonrise
| moonrise
li
i.wi.wi-moonset
| moonset
li
i.wi.wi-night-sleet
| night-sleet
li
i.wi.wi-night-alt-sleet
| night-alt-sleet
li
i.wi.wi-raindrop
| raindrop
li
i.wi.wi-barometer
| barometer
li
i.wi.wi-humidity
| humidity
.col-sm-3
ul
li
i.wi.wi-na
| na (no report)
li
i.wi.wi-flood
| flood
li
i.wi.wi-sandstorm
| sandstorm
li
i.wi.wi-tsunami
| tsunami
li
i.wi.wi-earthquake
| earthquake
li
i.wi.wi-fire
| fire
.col-sm-3
ul
li
i.wi.wi-volcano
| volcano
li
i.wi.wi-train
| train
li
i.wi.wi-small-craft-advisory
| small-craft-advisory
li
i.wi.wi-gale-warning
| gale-warning
li
i.wi.wi-storm-warning
| storm-warning
li
i.wi.wi-hurricane-warning
| hurricane-warning

@ -172,7 +172,7 @@ header {
font-family: @copy; font-family: @copy;
font-weight: 100; font-weight: 100;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 30px; //margin-top: 30px;
color: hsl(288, 24%, 52%); color: hsl(288, 24%, 52%);
line-height: 1.3em; line-height: 1.3em;
font-size: 25px; font-size: 25px;
@ -180,6 +180,9 @@ header {
font-size: 40px; font-size: 40px;
} }
} }
.icon-set {
margin-bottom: 20px;
}
.new-icons { .new-icons {
ul { ul {
@ -196,9 +199,24 @@ header {
} }
.instructions { .instructions {
margin-bottom: 10px; margin-bottom: 30px;
border-left: 10px solid fade(@purple, 50%); //border-left: 10px solid fade(@purple, 50%);
padding-left: 20px; //padding-left: 20px;
padding: 15px 20px;
border-radius: 10px;
color: @purple;
text-shadow: 0px 1px 0px hsla(0,0%,100%,1);
background-color: fade(@purple, 10%);
.clearfix;
.info-icon {
float: left;
font-size: 30px;
width: 40px;
//min-height: 75px;
}
p {
margin-left: 42px;
}
} }
.intro { .intro {

@ -553,7 +553,7 @@
content: "\f0b0"; content: "\f0b0";
} }
.wi-moon-alt-new:before { .wi-moon-alt-new:before {
content: "\f0cf"; content: "\f0eb";
} }
.wi-moon-alt-waxing-cresent-1:before { .wi-moon-alt-waxing-cresent-1:before {
content: "\f0d0"; content: "\f0d0";

File diff suppressed because one or more lines are too long

@ -224,7 +224,7 @@
<glyph unicode="&#xf0cc;" horiz-adv-x="1107" d="M0 -293v1829h110v-1829h-110zM184 746v790l923 -394z" /> <glyph unicode="&#xf0cc;" horiz-adv-x="1107" d="M0 -293v1829h110v-1829h-110zM184 746v790l923 -394z" />
<glyph unicode="&#xf0cd;" horiz-adv-x="923" d="M0 -293v1829h110v-1829h-110zM184 -63v790l923 -394zM184 746v790l923 -394z" /> <glyph unicode="&#xf0cd;" horiz-adv-x="923" d="M0 -293v1829h110v-1829h-110zM184 -63v790l923 -394zM184 746v790l923 -394z" />
<glyph unicode="&#xf0ce;" horiz-adv-x="1117" d="M0 -293v1829h121v-1829h-121zM206 832v704h912v-704h-912zM458 1046h406v267h-406v-267z" /> <glyph unicode="&#xf0ce;" horiz-adv-x="1117" d="M0 -293v1829h121v-1829h-121zM206 832v704h912v-704h-912zM458 1046h406v267h-406v-267z" />
<glyph unicode="&#xf0cf;" d="M0 769q0 -209 103 -386t280 -280t386 -103t385.5 103t279.5 280t103 386t-103 385.5t-279.5 279.5t-385.5 103t-386 -103t-280 -279.5t-103 -385.5z" /> <glyph unicode="&#xf0cf;" d="M0 -293v1829h121v-1829h-121zM206 35v704h912v-704h-912zM206 832v704h912v-704h-912zM458 249h406v268h-406v-268zM458 1046h406v267h-406v-267z" />
<glyph unicode="&#xf0d0;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM863 1449q168 -92 275.5 -266.5t107.5 -413.5q0 -502 -352 -675q241 45 401 235t160 440 q0 170 -78 318t-213.5 243.5t-300.5 118.5z" /> <glyph unicode="&#xf0d0;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM863 1449q168 -92 275.5 -266.5t107.5 -413.5q0 -502 -352 -675q241 45 401 235t160 440 q0 170 -78 318t-213.5 243.5t-300.5 118.5z" />
<glyph unicode="&#xf0d1;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM830 1453q152 -101 249 -276.5t97 -407.5q0 -492 -327 -682q169 20 307.5 115t218.5 244.5 t80 322.5q0 176 -83 328t-226 246.5t-316 109.5z" /> <glyph unicode="&#xf0d1;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM830 1453q152 -101 249 -276.5t97 -407.5q0 -492 -327 -682q169 20 307.5 115t218.5 244.5 t80 322.5q0 176 -83 328t-226 246.5t-316 109.5z" />
<glyph unicode="&#xf0d2;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM808 1454q131 -113 214 -288t83 -397q0 -475 -284 -686q131 10 248 68t202 149t134.5 213.5 t49.5 255.5q0 179 -86 333.5t-235 248.5t-326 103z" /> <glyph unicode="&#xf0d2;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM808 1454q131 -113 214 -288t83 -397q0 -475 -284 -686q131 10 248 68t202 149t134.5 213.5 t49.5 255.5q0 179 -86 333.5t-235 248.5t-326 103z" />
@ -252,5 +252,6 @@
<glyph unicode="&#xf0e8;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -136 51.5 -260t138.5 -215t208 -148t255 -64q-127 122 -178.5 294t-51.5 393 q0 198 63 378.5t175 307.5q-181 -7 -333 -100.5t-240 -249t-88 -336.5z" /> <glyph unicode="&#xf0e8;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -136 51.5 -260t138.5 -215t208 -148t255 -64q-127 122 -178.5 294t-51.5 393 q0 198 63 378.5t175 307.5q-181 -7 -333 -100.5t-240 -249t-88 -336.5z" />
<glyph unicode="&#xf0e9;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -130 47.5 -250t129 -210t194.5 -149.5t240 -73.5q-179 106 -252.5 278t-73.5 405 q0 212 90 394.5t250 289.5q-129 -11 -245 -69.5t-199 -149.5t-132 -212t-49 -253z" /> <glyph unicode="&#xf0e9;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -130 47.5 -250t129 -210t194.5 -149.5t240 -73.5q-179 106 -252.5 278t-73.5 405 q0 212 90 394.5t250 289.5q-129 -11 -245 -69.5t-199 -149.5t-132 -212t-49 -253z" />
<glyph unicode="&#xf0ea;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -254 164.5 -446t411.5 -233q-103 51 -175 124t-111.5 162t-57 184t-17.5 209 q0 216 102 398.5t281 281.5q-167 -21 -303.5 -116t-215.5 -244t-79 -320z" /> <glyph unicode="&#xf0ea;" d="M0 769q0 156 61 298t164 245t245 164t298 61t298.5 -61t245.5 -164t164 -245t61 -298t-61 -298.5t-164 -245.5t-245.5 -164t-298.5 -61t-298 61t-245 164t-164 245.5t-61 298.5zM82 769q0 -254 164.5 -446t411.5 -233q-103 51 -175 124t-111.5 162t-57 184t-17.5 209 q0 216 102 398.5t281 281.5q-167 -21 -303.5 -116t-215.5 -244t-79 -320z" />
<glyph unicode="&#xf0eb;" d="M0 769q0 -209 103 -386t280 -280t386 -103t385.5 103t279.5 280t103 386t-103 385.5t-279.5 279.5t-385.5 103t-386 -103t-280 -279.5t-103 -385.5z" />
</font> </font>
</defs></svg> </defs></svg>

Before

Width:  |  Height:  |  Size: 180 KiB

After

Width:  |  Height:  |  Size: 181 KiB

@ -26,7 +26,7 @@
@moon-waning-crescent-4: "\f0ae"; @moon-waning-crescent-4: "\f0ae";
@moon-waning-crescent-5: "\f0af"; @moon-waning-crescent-5: "\f0af";
@moon-waning-crescent-6: "\f0b0"; @moon-waning-crescent-6: "\f0b0";
@moon-alt-new: "\f0cf"; @moon-alt-new: "\f0eb";
@moon-alt-waxing-cresent-1: "\f0d0"; @moon-alt-waxing-cresent-1: "\f0d0";
@moon-alt-waxing-cresent-2: "\f0d1"; @moon-alt-waxing-cresent-2: "\f0d1";
@moon-alt-waxing-cresent-3: "\f0d2"; @moon-alt-waxing-cresent-3: "\f0d2";

@ -10,4 +10,4 @@ $wind-beaufort-8: "\f0bf";
$wind-beaufort-9: "\f0c0"; $wind-beaufort-9: "\f0c0";
$wind-beaufort-10: "\f0c1"; $wind-beaufort-10: "\f0c1";
$wind-beaufort-11: "\f0c2"; $wind-beaufort-11: "\f0c2";
$wind-beaufort-12: "\f0c3"; $wind-beaufort-12: "\f0c3";

@ -23,4 +23,4 @@ $day-windy: "\f085";
$solar-eclipse: "\f06e"; $solar-eclipse: "\f06e";
$hot: "\f072"; $hot: "\f072";
$day-cloudy-high: "\f07d"; $day-cloudy-high: "\f07d";
$day-light-wind: "\f0c4"; $day-light-wind: "\f0c4";

@ -5,4 +5,4 @@ $direction-down-right: "\f088";
$direction-down: "\f044"; $direction-down: "\f044";
$direction-down-left: "\f043"; $direction-down-left: "\f043";
$direction-left: "\f048"; $direction-left: "\f048";
$direction-up-left: "\f087"; $direction-up-left: "\f087";

@ -20,4 +20,4 @@ $umbrella: "\f084";
$barometer: "\f079"; $barometer: "\f079";
$humidity: "\f07a"; $humidity: "\f07a";
$na: "\f07b"; $na: "\f07b";
$train: "\f0cb"; $train: "\f0cb";

@ -26,7 +26,7 @@ $moon-waning-crescent-3: "\f0ad";
$moon-waning-crescent-4: "\f0ae"; $moon-waning-crescent-4: "\f0ae";
$moon-waning-crescent-5: "\f0af"; $moon-waning-crescent-5: "\f0af";
$moon-waning-crescent-6: "\f0b0"; $moon-waning-crescent-6: "\f0b0";
$moon-alt-new: "\f0cf"; $moon-alt-new: "\f0eb";
$moon-alt-waxing-cresent-1: "\f0d0"; $moon-alt-waxing-cresent-1: "\f0d0";
$moon-alt-waxing-cresent-2: "\f0d1"; $moon-alt-waxing-cresent-2: "\f0d1";
$moon-alt-waxing-cresent-3: "\f0d2"; $moon-alt-waxing-cresent-3: "\f0d2";

@ -37,4 +37,4 @@ $small-craft-advisory: "\f0cc";
$gale-warning: "\f0cd"; $gale-warning: "\f0cd";
$storm-warning: "\f0ce"; $storm-warning: "\f0ce";
$hurricane-warning: "\f0cf"; $hurricane-warning: "\f0cf";
$wind-direction: "\f0b1"; $wind-direction: "\f0b1";

@ -41,4 +41,4 @@ $storm-showers: "\f01d";
$thunderstorm: "\f01e"; $thunderstorm: "\f01e";
$night-alt-cloudy-high: "\f07e"; $night-alt-cloudy-high: "\f07e";
$night-cloudy-high: "\f080"; $night-cloudy-high: "\f080";
$night-alt-partly-cloudy: "\f081"; $night-alt-partly-cloudy: "\f081";

@ -9,4 +9,4 @@ $time-8: "\f091";
$time-9: "\f092"; $time-9: "\f092";
$time-10: "\f093"; $time-10: "\f093";
$time-11: "\f094"; $time-11: "\f094";
$time-12: "\f089"; $time-12: "\f089";
Loading…
Cancel
Save