simpleweather js weather icons

Question

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: http://codepen.io/perrylivingston/pen/dMLLOP These are the icons i'm trying to use: https://github.com/erikflowers/weather-icons

html:

    <div id="the_weather"></div>
    <button class="js-geolocation"> Use Location</button>
    <i class="wi wi-yahoo-31"></i>

css:

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;

}

#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;
}

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

$('.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 = '<h2><i class="icon-'+weather.code+'"></i>          '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li>';
html += '<li>'+weather.alt.temp+'&deg;C</li></ul>';  

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

Answer 1

Your code seems to be working correctly.
Make sure you insert your libraries in the order below

1. JQuery
2. Simple Weather

and don't forget to include your weather icons CSS and Bootstrap CSS files

 $(document).ready(function() { if ("geolocation" in navigator) { $('.js-geolocation').show(); } else { $('.js-geolocation').hide(); } // button handler $('.js-geolocation').on('click', function() { navigator.geolocation.getCurrentPosition(function(position) { loadWeather(position.coords.latitude + ',' + position.coords.longitude); }); }); // loads weather function loadWeather(location, woeid) { $.simpleWeather({ location: location, woeid: woeid, unit: 'f', success: function(weather) { html = '<h2><i class="wi wi-yahoo-' + weather.code + '"></i> ' + weather.temp + '&deg;' + weather.units.temp + '</h2>'; html += '<ul><li>' + weather.city + ', ' + weather.region + '</li>'; html += '<li class="currently">' + weather.currently + '</li>'; html += '<li>' + weather.alt.temp + '&deg;C</li></ul>'; $("#the_weather").html(html); }, error: function(error) { $("#the_weather").html('<p>' + error + '</p>'); } }); } // init loadWeather('Miami', ''); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div id="the_weather"></div> <button class="js-geolocation">Use Location</button> <i class="wi wi-night-clear"></i>