simpleweather js weather icons
<p>I'm attempting to make a weather app using simpleweather js. I've successfully been able to get the app to show the weather for my current location but i'm not sure how to get weather icons to show next to the temperature. Any help would be greatly appreciated.
Here is my codepen: <a href="http://codepen.io/perrylivingston/pen/dMLLOP" rel="nofollow">http://codepen.io/perrylivingston/pen/dMLLOP</a>
These are the icons i'm trying to use:<a href="https://github.com/erikflowers/weather-icons" rel="nofollow">https://github.com/erikflowers/weather-icons</a></p>

<p><strong><em>html:</em></strong></p>

<pre><code>    &lt;div id="the_weather"&gt;&lt;/div&gt;
    &lt;button class="js-geolocation"&gt; Use Location&lt;/button&gt;
    &lt;i class="wi wi-yahoo-31"&gt;&lt;/i&gt;
</code></pre>

<p><strong><em>css:</em></strong></p>

<pre><code>body {
background-image: url("http://www.psdgraphics.com/file/blue-sky.jpg");
background-size: cover;
height: 100%;
width: 100%;
}

#the_weather {
width: 500px;
text-align: center;
margin: 0px auto;
text-transform: uppercase;
}

@font-face {
src: url('weathericons-regular-webfont.eot') format ('embedded-opentype');
src: url('weathericons-regular-webfont.svg') format ('svg');
src: url('weathericons-regular-webfont.ttf') format('truetype');
src: url('weathericons-regular-webfont.woff') format('woff');
src: url('weathericons-regular-webfont.woff2') format('woff2');
}

i {
color: #ffffff;
font-size: 160px;
font-weight: normal;
font-style: normal;
}

#the_weather li {
display: block;
font-weight: bold;
padding: 5px;
}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

#weather h2 {
margin: 0 0 8px;
color: #fff;
font-size: 100px;
font-weight: 300;
text-align: center;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}

#weather ul {
margin: 0;
padding: 0;
}

#weather li {
background: #fff;
background: rgba(255,255,255,0.90);
padding: 20px;
display: inline-block;
border-radius: 5px;
</code></pre>

<p>}</p>

<pre><code>#weather .currently {
margin: 0 20px;
}

button {
display: block;
margin: 15px auto;
width: 140px;
padding: 5px;
background:#efcc3a;
color: #0;
font-weight: bold;
border: 0;
border-radius: 5px;
}
</code></pre>

<p>jquery
    if ("geolocation" in navigator) {
    $('.js-geolocation').show(); 
    } else {
    $('.js-geolocation').hide();
    }</p>

<pre><code>$('.js-geolocation').on('click', function() {
navigator.geolocation.getCurrentPosition(function(position) {
loadWeather(position.coords.latitude+','+position.coords.longitude);
});
});


$(document).ready(function() {
loadWeather('New York','');
});

function loadWeather(location, woeid) {
$.simpleWeather({
location: location,
woeid: woeid,
unit: 'f',
success: function(weather) {
html = '&lt;h2&gt;&lt;i class="icon-'+weather.code+'"&gt;&lt;/i&gt;          '+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;/h2&gt;';
html += '&lt;ul&gt;&lt;li&gt;'+weather.city+', '+weather.region+'&lt;/li&gt;';
html += '&lt;li class="currently"&gt;'+weather.currently+'&lt;/li&gt;';
html += '&lt;li&gt;'+weather.alt.temp+'&amp;deg;C&lt;/li&gt;&lt;/ul&gt;';  

$("#the_weather").html(html);
},
error: function(error) {
$("#the_weather").html('&lt;p&gt;'+error+'&lt;/p&gt;');
}
});
}
</code></pre>