You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
8.8 KiB
Plaintext
203 lines
8.8 KiB
Plaintext
doctype
|
|
html
|
|
head
|
|
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')
|
|
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')
|
|
|
|
link(rel='stylesheet', href='css/styles.css')
|
|
link(rel='stylesheet', href='css/weather-icons.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
|
|
|
|
header
|
|
.container
|
|
.row-fluid
|
|
.col-sm-12
|
|
.icon
|
|
.icon-box
|
|
.wi.wi-day-cloudy
|
|
h1 Weather Icons
|
|
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
|
|
.container
|
|
.row
|
|
.col-sm-12
|
|
.social-wrapper
|
|
ul
|
|
li
|
|
iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=watch&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='100px', height='20px')
|
|
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 - 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.
|
|
!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");
|
|
|
|
|
|
section.content.container.intro
|
|
.row
|
|
.col-sm-12
|
|
.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 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!
|
|
|
|
|
|
.features
|
|
.row
|
|
.col-sm-4
|
|
h3
|
|
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!
|
|
.col-sm-4
|
|
h3
|
|
i.wi.wi-lightning
|
|
| Use In Graphic Apps
|
|
p Weather Icons come with OTF and TTF files, so you can use this page to copy icons and paste them right into your favorite design apps like Photoshop, Illustrator, Sketch!
|
|
.col-sm-4
|
|
h3
|
|
i.wi.wi-night-rain
|
|
| Flip, Scale, Transform
|
|
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.
|
|
a(href="api-list.html") View the list of API mappings here.
|
|
.col-sm-4
|
|
h3
|
|
i.wi.wi-thunderstorm
|
|
| Specialty Icons
|
|
p Included are 28 moon phases, 12 hours of clock, the Beaufort wind force scale, maritime wind warnings,
|
|
.col-sm-4
|
|
h3
|
|
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
|
|
.col-sm-12
|
|
.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 <i class="wi wi-night-sleet"></i>
|
|
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
|
|
a.github-button(href="http://github.com/erikflowers/weather-icons") View the project on GitHub
|
|
i.fa.fa-github
|
|
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
|
|
.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
|
|
h3 Flip
|
|
p
|
|
code wi-flip-horizontal
|
|
p
|
|
code wi-flip-vertical
|
|
.col-sm-4
|
|
h3 Rotate
|
|
p
|
|
code wi-rotate-90
|
|
p
|
|
code wi-rotate-180
|
|
p
|
|
code wi-rotate-270
|
|
.col-sm-4
|
|
h3 Fixed Width
|
|
p
|
|
code wi-fw
|
|
|
|
|
|
|
|
footer
|
|
.container
|
|
.row
|
|
.col-sm-6
|
|
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 - 2.0 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.
|
|
.col-sm-6
|
|
p Weather Icons licensed under
|
|
a(href="http://scripts.sil.org/OFL") SIL OFL 1.1,
|
|
| Code licensed under
|
|
a(href="http://opensource.org/licenses/mit-license.html") MIT License,
|
|
| Documentation licensed under
|
|
a(href="http://creativecommons.org/licenses/by/3.0/") CC BY 3.0
|
|
.row
|
|
.col-sm-12
|
|
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 |