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

fixed the missing raindrops icon. updating index more.

Browse Source
This commit is contained in:
Erik Flowers 2015-08-06 19:12:56 -07:00
parent b394991018
commit b65e5626be
15 changed files with 8642 additions and 2704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_builder/csv/neutral-cloudy.csv
View File

@ -12,6 +12,7 @@ showers, f01a
sleet, f0b5 sleet, f0b5
snow, f01b snow, f01b
sprinkle, f01c sprinkle, f01c
raindrops, f04e
storm-showers, f01d storm-showers, f01d
thunderstorm, f01e thunderstorm, f01e
snow-wind, f064 snow-wind, f064

1 cloud f041
12 sleet f0b5
13 snow f01b
14 sprinkle f01c
15 raindrops f04e
16 storm-showers f01d
17 thunderstorm f01e
18 snow-wind f064

95
_docs/css/styles.css
View File

@ -6830,6 +6830,101 @@ h2 {
width: 960px; width: 960px;
margin: 0 auto; margin: 0 auto;
} }
header {
position: relative;
height: 100px;
padding-top: 0px;
background: url("img/sky.jpg") top center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-bottom: 5px solid #404040;
}
@media (min-width: 768px) {
header {
min-height: 100%;
height: 100vh;
POSITION: RELATIVE;
}
}
header h1 {
float: left;
font-family: "proxima nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 30px;
margin-top: 40px;
margin-left: 0px;
color: #ffffff;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.9);
}
@media (min-width: 768px) {
header h1 {
font-size: 60px;
margin-top: 180px;
}
}
header .icon {
position: absolute;
right: 20px;
top: 40px;
color: #ffffff;
font-size: 55px;
margin-left: 100px;
float: left;
line-height: .65em;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
header .icon {
font-size: 200px;
top: 100px;
}
}
.headline {
font-size: 25px;
line-height: 1.3em;
margin-bottom: 30px;
}
.intro {
font-size: 18px;
margin-top: 30px;
font-weight: 400;
}
.intro-icons {
font-size: 15px;
color: #357cbb;
}
.intro-icons i {
margin-right: 10px;
}
@media (min-width: 768px) {
.intro-icons {
font-size: 25px;
}
.intro-icons i {
margin-right: 10px;
}
}
@media (min-width: 992px) {
.intro-icons {
font-size: 45px;
}
.intro-icons i {
margin-right: 10px;
}
}
footer {
height: 200px;
background-color: #333333;
margin-top: 30px;
color: #ffffff;
padding-top: 15px;
font-weight: 400;
}
footer a {
color: #b3b3b3;
}
.icon-wrap { .icon-wrap {
width: 50%; width: 50%;
position: relative; position: relative;

6456
_docs/font-source/artwork/cloud pieces.ai Normal file
View File

File diff suppressed because one or more lines are too long

55
_docs/index.html
View File

@ -2,13 +2,50 @@
<html> <html>
<head> <head>
<title>Weather Icons - 219 font icons inspired by Font Awesome and designed for Bootstrap</title> <title>Weather Icons - 219 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">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<!--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">
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="../css/weather-icons.css"> <link rel="stylesheet" href="../css/weather-icons.css">
<link rel="stylesheet" href="../css/weather-icons-wind.css"> <link rel="stylesheet" href="../css/weather-icons-wind.css">
<script src="//use.typekit.net/hse2lqc.js"></script>
<script>try{Typekit.load();}catch(e){} script(src='js/bootstrap.min.js')</script>
<script>
(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),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-547519-12', 'erikflowers.github.io');
ga('send', 'pageview');
</script>
</head> </head>
<body> <body>
<section></section> <header>
<div class="container">
<div class="row-fluid">
<div class="col-sm-12">
<h1>Weather Icons</h1>
<div class="icon"><i class="wi wi-day-cloudy"></i></div>
</div>
</div>
</div>
</header>
<section class="content container intro">
<div class="row">
<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-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></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>Please make requests or report any issues to the<a href="https://github.com/erikflowers/weather-icons/issues">main repository.</a></p>
</div>
</div>
</section>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
@ -459,6 +496,11 @@
<div class="icon-name">wi-sprinkle</div> <div class="icon-name">wi-sprinkle</div>
<div class="icon_unicode">f01c </div> <div class="icon_unicode">f01c </div>
</div> </div>
<div class="icon-wrap">
<div class="icon">&#xf04e;</div>
<div class="icon-name">wi-raindrops</div>
<div class="icon_unicode">f04e </div>
</div>
<div class="icon-wrap"> <div class="icon-wrap">
<div class="icon">&#xf01d;</div> <div class="icon">&#xf01d;</div>
<div class="icon-name">wi-storm-showers</div> <div class="icon-name">wi-storm-showers</div>
@ -1279,5 +1321,16 @@
</div> </div>
</div> </div>
</div> </div>
<footer>
<div class="container">
<div class="row">
<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>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 href="http://scripts.sil.org/OFL">SIL OFL 1.1</a> &mdash; Code licensed under<a href="http://opensource.org/licenses/mit-license.html">MIT License</a> &mdash; Documentation licensed under<a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></p>
</div>
</div>
</div>
</footer>
</body> </body>
</html> </html>

1296
_docs/jade/cheatsheet.html Normal file
View File

File diff suppressed because it is too large Load Diff

4
_docs/jade/icon-list-neutral-cloudy.jade
View File

@ -54,6 +54,10 @@
.icon &#xf01c; .icon &#xf01c;
.icon-name wi-sprinkle .icon-name wi-sprinkle
.icon_unicode f01c .icon_unicode f01c
.icon-wrap
.icon &#xf04e;
.icon-name wi-raindrops
.icon_unicode f04e
.icon-wrap .icon-wrap
.icon &#xf01d; .icon &#xf01d;
.icon-name wi-storm-showers .icon-name wi-storm-showers

75
_docs/jade/index.jade
View File

@ -2,6 +2,13 @@ doctype
html html
head head
title Weather Icons - 219 font icons inspired by Font Awesome and designed for Bootstrap title Weather Icons - 219 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')
link(rel='icon', type='image/png', href='/favicon-16x16.png', sizes='16x16')
link(rel='icon', type='image/png', href='/favicon-32x32.png', sizes='32x32')
meta(name='msapplication-TileColor', content='#da532c')
//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')
@ -9,11 +16,56 @@ html
link(rel='stylesheet', href='../css/weather-icons.css') link(rel='stylesheet', href='../css/weather-icons.css')
link(rel='stylesheet', href='../css/weather-icons-wind.css') link(rel='stylesheet', href='../css/weather-icons-wind.css')
script(src='//use.typekit.net/hse2lqc.js')
script.
try{Typekit.load();}catch(e){} script(src='js/bootstrap.min.js')
script.
(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),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-547519-12', 'erikflowers.github.io');
ga('send', 'pageview');
body body
section header
.container
.row-fluid
.col-sm-12
h1 Weather Icons
.icon
i.wi.wi-day-cloudy
section.content.container.intro
.row
.col-sm-12
p.intro-icons
i.wi.wi-day-lightning
i.wi.wi-night-thunderstorm
i.wi.wi-day-snow
i.wi.wi-sprinkle
i.wi.wi-day-sunny
i.wi.wi-cloudy
i.wi.wi-night-rain-mix
i.wi.wi-sunset
i.wi.wi-sunrise
i.wi.wi-day-cloudy-windy
i.wi.wi-night-rain
i.wi.wi-night-alt-snow
p.headline Weather Icons is a font of 189 weather themed icons, ready to be dropped right into
a(href="http://getbootstrap.com") Bootstrap
| or any other project.
i.wi.wi-cloudy
p Inspired by
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:
code &lt;i class="wi wi-day-lightning"&gt;&lt;/i&gt;
p Please make requests or report any issues to the
a(href="https://github.com/erikflowers/weather-icons/issues") main repository.
.container .container
.row .row
@ -27,3 +79,22 @@ html
footer
.container
.row
.col-sm-12
p The Weather Icons project created and maintained by
a(href="http://www.twitter.com/Erik_UX") Erik Flowers
|. v1.0 artwork by
a(href="http://www.twitter.com/artill") Lukas Bischoff
|. v1.1, 1.2, 1.3 artwork by
a(href="http://www.twitter.com/Erik_UX") Erik Flowers
p LESS/HTML implementation inspired and heavily influenced by
a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome.
p Weather Icons licensed under
a(href="http://scripts.sil.org/OFL") SIL OFL 1.1
| &mdash; Code licensed under
a(href="http://opensource.org/licenses/mit-license.html") MIT License
| &mdash; Documentation licensed under
a(href="http://creativecommons.org/licenses/by/3.0/") CC BY 3.0

89
_docs/less/main.less
View File

@ -1,4 +1,93 @@
header {
position: relative;
height: 100px;
padding-top: 0px;
background: url("img/sky.jpg") top center no-repeat fixed;
.background-cover;
border-bottom: 5px solid hsl(0, 0%, 25%);
@media (min-width: @screen-tablet) {
//height: 300px;
min-height: 100%;
height: 100vh;
POSITION: RELATIVE;
}
h1 {
float: left;
font-family: "proxima nova", @copy;
font-weight: 100;
font-size: 30px;
margin-top: 40px;
margin-left: 0px;
color: hsl(0, 0%, 100%);
text-shadow: 0px 2px 2px hsla(0, 0%, 0%, .9);
@media (min-width: @screen-tablet) {
font-size: 60px;
margin-top: 180px;
}
}
.icon {
position: absolute;
right: 20px;
top: 40px;
//bottom: 10px;
color: hsl(0, 0%, 100%);
font-size: 55px;
margin-left: 100px;
//margin-top: 120px;
float: left;
line-height: .65em;
text-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
@media (min-width: @screen-tablet) {
font-size: 200px;
top: 100px;
}
}
}
.headline {
font-size: 25px;
line-height: 1.3em;
margin-bottom: 30px;
}
.intro {
font-size: 18px;
margin-top: 30px;
font-weight: @normal;
}
.intro-icons {
font-size: 15px;
color: hsl(208, 56%, 47%);
i {
margin-right: 10px;
}
@media (min-width: @screen-tablet) {
font-size: 25px;
i {
margin-right: 10px;
}
}
@media (min-width: @screen-desktop) {
font-size: 45px;
i {
margin-right: 10px;
}
}
}
footer {
height: 200px;
background-color: hsl(0, 0%, 20%);
margin-top: 30px;
color: hsl(0, 0%, 100%);
padding-top: 15px;
font-weight: @normal;
a {
color: hsl(0, 0%, 70%);
}
}
.icon-wrap { .icon-wrap {
.make-xs-column(6); .make-xs-column(6);

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

@ -296,6 +296,9 @@
.wi-sprinkle:before { .wi-sprinkle:before {
content: ""; } content: ""; }
.wi-raindrops:before {
content: ""; }
.wi-storm-showers:before { .wi-storm-showers:before {
content: ""; } content: ""; }

3
css/weather-icons.css
View File

@ -296,6 +296,9 @@
.wi-sprinkle:before { .wi-sprinkle:before {
content: "\f01c"; content: "\f01c";
} }
.wi-raindrops:before {
content: "\f04e";
}
.wi-storm-showers:before { .wi-storm-showers:before {
content: "\f01d"; content: "\f01d";
} }

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

File diff suppressed because it is too large Load Diff

1
less/icon-classes/classes-neutral-cloudy.less
View File

@ -12,6 +12,7 @@
.wi-sleet:before {content: @sleet;} .wi-sleet:before {content: @sleet;}
.wi-snow:before {content: @snow;} .wi-snow:before {content: @snow;}
.wi-sprinkle:before {content: @sprinkle;} .wi-sprinkle:before {content: @sprinkle;}
.wi-raindrops:before {content: @raindrops;}
.wi-storm-showers:before {content: @storm-showers;} .wi-storm-showers:before {content: @storm-showers;}
.wi-thunderstorm:before {content: @thunderstorm;} .wi-thunderstorm:before {content: @thunderstorm;}
.wi-snow-wind:before {content: @snow-wind;} .wi-snow-wind:before {content: @snow-wind;}

1
less/icon-variables/variables-neutral-cloudy.less
View File

@ -12,6 +12,7 @@
@sleet: "\f0b5"; @sleet: "\f0b5";
@snow: "\f01b"; @snow: "\f01b";
@sprinkle: "\f01c"; @sprinkle: "\f01c";
@raindrops: "\f04e";
@storm-showers: "\f01d"; @storm-showers: "\f01d";
@thunderstorm: "\f01e"; @thunderstorm: "\f01e";
@snow-wind: "\f064"; @snow-wind: "\f064";

1
sass/icon-classes/classes-neutral-cloudy.scss
View File

@ -12,6 +12,7 @@
.wi-sleet:before {content: $sleet;} .wi-sleet:before {content: $sleet;}
.wi-snow:before {content: $snow;} .wi-snow:before {content: $snow;}
.wi-sprinkle:before {content: $sprinkle;} .wi-sprinkle:before {content: $sprinkle;}
.wi-raindrops:before {content: $raindrops;}
.wi-storm-showers:before {content: $storm-showers;} .wi-storm-showers:before {content: $storm-showers;}
.wi-thunderstorm:before {content: $thunderstorm;} .wi-thunderstorm:before {content: $thunderstorm;}
.wi-snow-wind:before {content: $snow-wind;} .wi-snow-wind:before {content: $snow-wind;}

1
sass/icon-variables/variables-neutral-cloudy.scss
View File

@ -12,6 +12,7 @@ $showers: "\f01a";
$sleet: "\f0b5"; $sleet: "\f0b5";
$snow: "\f01b"; $snow: "\f01b";
$sprinkle: "\f01c"; $sprinkle: "\f01c";
$raindrops: "\f04e";
$storm-showers: "\f01d"; $storm-showers: "\f01d";
$thunderstorm: "\f01e"; $thunderstorm: "\f01e";
$snow-wind: "\f064"; $snow-wind: "\f064";