- 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 ""
:join ";\n"
:row [\$ label \: " " \" \\ code \"]
:after "\n"}
:after ";"}
{:name "../less/icon-classes/classes-beaufort.less"

@ -26,7 +26,7 @@ moon-waning-crescent-3, f0ad
moon-waning-crescent-4, f0ae
moon-waning-crescent-5, f0af
moon-waning-crescent-6, f0b0
moon-alt-new, f0cf
moon-alt-new, f0eb
moon-alt-waxing-cresent-1, f0d0
moon-alt-waxing-cresent-2, f0d1
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 ""
:join ";\n"
:row [\$ label \: " " \" \\ code \"]
:after "\n"}
:after ";"}
{:name "../less/icon-classes/classes-day.less"

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

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

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

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

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

@ -31250,7 +31250,6 @@ unicode = F0CE;
},
{
glyphname = unif0cf;
lastChange = "2015-08-18 18:53:56 +0000";
layers = (
{
layerId = "8BEE18A2-62EC-4A69-8B77-4987BEDA7528";
@ -31259,18 +31258,46 @@ 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"
"180 728 LINE",
"978 728 LINE",
"978 1344 LINE",
"180 1344 LINE"
);
},
{
closed = 1;
nodes = (
"401 915 LINE",
"401 1149 LINE",
"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;
lastChange = "2015-08-18 21:22:57 +0000";
layers = (
{
layerId = "8BEE18A2-62EC-4A69-8B77-4987BEDA7528";
@ -32655,6 +32683,37 @@ width = 1345;
}
);
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 = (

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<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-->
<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">

@ -9043,7 +9043,6 @@ header .icon .icon-box {
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
margin-bottom: 10px;
margin-top: 30px;
color: #9667a2;
line-height: 1.3em;
font-size: 25px;
@ -9053,6 +9052,9 @@ header .icon .icon-box {
font-size: 40px;
}
}
.icon-set {
margin-bottom: 20px;
}
.new-icons ul {
list-style: none;
}
@ -9065,9 +9067,36 @@ header .icon .icon-box {
font-size: 20px;
}
.instructions {
margin-bottom: 10px;
border-left: 10px solid rgba(146, 77, 163, 0.5);
padding-left: 20px;
margin-bottom: 30px;
padding: 15px 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 {
font-size: 18px;

@ -553,7 +553,7 @@
content: "\f0b0";
}
.wi-moon-alt-new:before {
content: "\f0cf";
content: "\f0eb";
}
.wi-moon-alt-waxing-cresent-1:before {
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="&#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="&#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="&#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" />
@ -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="&#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="&#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>
</defs></svg>

Before

Width:  |  Height:  |  Size: 180 KiB

After

Width:  |  Height:  |  Size: 181 KiB

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

@ -1,7 +1,7 @@
doctype
html
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
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')

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

@ -1,49 +1,57 @@
.col-sm-12
.col-sm-12.icon-set
.section-title Daytime
.row
include icon-list-day
.col-sm-12
.col-sm-12.icon-set
.section-title Nighttime
.row
include icon-list-night
.col-sm-12
.col-sm-12.icon-set
.section-title Neutral
.row
include icon-list-neutral
.col-sm-12
.col-sm-12.icon-set
.section-title Miscellaneous
.row
include icon-list-misc
.col-sm-12
.col-sm-12.icon-set
.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
include icon-list-moon
.col-sm-12
.col-sm-12.icon-set
.section-title Time
.row
include icon-list-time
.col-sm-12
.col-sm-12.icon-set
.section-title Directional Arrows
.row
include icon-list-direction
.col-sm-12
.col-sm-12.icon-set
.section-title Wind Degree Examples
.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 There are 360 classes for each in 1 degree increments for maximum precision.
p
.row
include icon-list-wind
.col-sm-12
.col-sm-12.icon-set
.section-title Wind Cardinal Examples
.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 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
.row
include icon-list-wind-cardinal
.col-sm-12
.col-sm-12.icon-set
.section-title Beaufort Wind Scale
.row
include icon-list-beaufort

@ -1,7 +1,7 @@
doctype
html
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
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')
@ -38,7 +38,7 @@ html
.icon-box
.wi.wi-day-cloudy
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
i.wi.wi-sunset
section.social
@ -52,7 +52,7 @@ html
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')
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
a.twitter-follow-button(href='https://twitter.com/Erik_UX', data-show-count='false', data-lang='en') Follow @Erik_UX
script.
@ -75,7 +75,7 @@ html
i.wi.wi-day-cloudy-windy
i.wi.wi-night-rain
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,
| or any project that needs high quality weather, maritime, and meteorological based icons!
@ -87,12 +87,6 @@ html
i.wi.wi-day-sunny
| 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!
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
h3
i.wi.wi-lightning
@ -102,13 +96,18 @@ html
h3
i.wi.wi-night-rain
| 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
.col-sm-4
h3
i.wi.wi-earthquake
| 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.
.col-sm-4
h3
@ -120,96 +119,14 @@ html
i.wi.wi-volcano.from-270-deg
| Less and Sass Support
p Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.
.row.new-icons
.row
.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
.section-title Getting Started
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;
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
.meta
@ -218,13 +135,16 @@ html
p Please make requests or report any issues to the
a(href="https://github.com/erikflowers/weather-icons/issues") main repository on GitHub.
include new-icons
.row
include icon-list
.row-
.row
.col-sm-12
.section-title Utility Classes
.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.
.row
.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-weight: 100;
margin-bottom: 10px;
margin-top: 30px;
//margin-top: 30px;
color: hsl(288, 24%, 52%);
line-height: 1.3em;
font-size: 25px;
@ -180,6 +180,9 @@ header {
font-size: 40px;
}
}
.icon-set {
margin-bottom: 20px;
}
.new-icons {
ul {
@ -196,9 +199,24 @@ header {
}
.instructions {
margin-bottom: 10px;
border-left: 10px solid fade(@purple, 50%);
padding-left: 20px;
margin-bottom: 30px;
//border-left: 10px solid fade(@purple, 50%);
//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 {

@ -553,7 +553,7 @@
content: "\f0b0";
}
.wi-moon-alt-new:before {
content: "\f0cf";
content: "\f0eb";
}
.wi-moon-alt-waxing-cresent-1:before {
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="&#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="&#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="&#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" />
@ -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="&#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="&#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>
</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-5: "\f0af";
@moon-waning-crescent-6: "\f0b0";
@moon-alt-new: "\f0cf";
@moon-alt-new: "\f0eb";
@moon-alt-waxing-cresent-1: "\f0d0";
@moon-alt-waxing-cresent-2: "\f0d1";
@moon-alt-waxing-cresent-3: "\f0d2";

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

@ -23,4 +23,4 @@ $day-windy: "\f085";
$solar-eclipse: "\f06e";
$hot: "\f072";
$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-left: "\f043";
$direction-left: "\f048";
$direction-up-left: "\f087";
$direction-up-left: "\f087";

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

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

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

@ -41,4 +41,4 @@ $storm-showers: "\f01d";
$thunderstorm: "\f01e";
$night-alt-cloudy-high: "\f07e";
$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-10: "\f093";
$time-11: "\f094";
$time-12: "\f089";
$time-12: "\f089";
Loading…
Cancel
Save