Weather Icons

condition.weather is a number matching a weather icon, in our weather icon set. You can access the weather icon set at the following url http://cdnimages.magicseaweed.com/30x30/[ICON NUMBER].png replacing the [ICON NUMBER] with the condition.weather key.

Full weather icon sprite sheet can be found here.

The accompanying CSS is here:

.msw-sw
{
display: inline-block;
width: 30px;
height: 30px;
background: url("http://im-1.msw.ms/md/static/we-sprite.png") no-repeat top left;
}
.msw-sw-1{ background-position: 0 0; width: 30px; height: 30px; }
.msw-sw-10{ background-position: 0 -60px; width: 30px; height: 30px; }
.msw-sw-11{ background-position: 0 -120px; width: 30px; height: 30px; }
.msw-sw-12{ background-position: 0 -180px; width: 30px; height: 30px; }
.msw-sw-13{ background-position: 0 -240px; width: 30px; height: 30px; }
.msw-sw-14{ background-position: 0 -300px; width: 30px; height: 30px; }
.msw-sw-15{ background-position: 0 -360px; width: 30px; height: 30px; }
.msw-sw-16{ background-position: 0 -420px; width: 30px; height: 30px; }
.msw-sw-17{ background-position: 0 -480px; width: 30px; height: 30px; }
.msw-sw-18{ background-position: 0 -540px; width: 30px; height: 30px; }
.msw-sw-19{ background-position: 0 -600px; width: 30px; height: 30px; }
.msw-sw-2{ background-position: 0 -660px; width: 30px; height: 30px; }
.msw-sw-20{ background-position: 0 -720px; width: 30px; height: 30px; }
.msw-sw-21{ background-position: 0 -780px; width: 30px; height: 30px; }
.msw-sw-22{ background-position: 0 -840px; width: 30px; height: 30px; }
.msw-sw-23{ background-position: 0 -900px; width: 30px; height: 30px; }
.msw-sw-24{ background-position: 0 -960px; width: 30px; height: 30px; }
.msw-sw-25{ background-position: 0 -1020px; width: 30px; height: 30px; }
.msw-sw-26{ background-position: 0 -1080px; width: 30px; height: 30px; }
.msw-sw-27{ background-position: 0 -1140px; width: 30px; height: 30px; }
.msw-sw-28{ background-position: 0 -1200px; width: 30px; height: 30px; }
.msw-sw-29{ background-position: 0 -1260px; width: 30px; height: 30px; }
.msw-sw-3{ background-position: 0 -1320px; width: 30px; height: 30px; }
.msw-sw-30{ background-position: 0 -1380px; width: 30px; height: 30px; }
.msw-sw-31{ background-position: 0 -1440px; width: 30px; height: 30px; }
.msw-sw-32{ background-position: 0 -1500px; width: 30px; height: 30px; }
.msw-sw-33{ background-position: 0 -1560px; width: 30px; height: 30px; }
.msw-sw-34{ background-position: 0 -1620px; width: 30px; height: 30px; }
.msw-sw-35{ background-position: 0 -1680px; width: 30px; height: 30px; }
.msw-sw-36{ background-position: 0 -1740px; width: 30px; height: 30px; }
.msw-sw-37{ background-position: 0 -1800px; width: 30px; height: 30px; }
.msw-sw-38{ background-position: 0 -1860px; width: 30px; height: 30px; }
.msw-sw-4{ background-position: 0 -1920px; width: 30px; height: 30px; }
.msw-sw-5{ background-position: -60px 0; width: 30px; height: 30px; }
.msw-sw-6{ background-position: -60px -60px; width: 30px; height: 30px; }
.msw-sw-7{ background-position: -60px -120px; width: 30px; height: 30px; }
.msw-sw-8{ background-position: -60px -180px; width: 30px; height: 30px; }
.msw-sw-9{ background-position: -60px -240px; width: 30px; height: 30px; }