How to change font or icons of yahoo weather api via amazon web services

Base on this codepen Sample, i want to change the icons of the weather for others something like this, these icons are generated with font-family: weather; and replaced after that according to each letter exemple :

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }

Html code:

<div id="weather"></div>

JS code :

// v3.1.0
//Docs at http://simpleweatherjs.com
$(document).ready(function() {
  $.simpleWeather({
    location: 'Austin, TX',
    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.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';

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

CSS code :

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

...
}

Answers:

Answer

You have to make an array of templates for all codes so that each code has specific template, then pass the code to a function which will generate HTML for that code. See below snippet, I've made example for Cloud-Rain Icon, similarly you can create other templates.

// v3.1.0
function getTemplate2(ico1, ico2) {
  return '<section><div class="icon">\
    <div class="' + ico1 + '">\
      <div class="' + ico2 + '">\
        <div></div><div></div>\
        <div></div><div></div>\
        <div></div><div></div>\
        <div></div><div></div>\
      </div>\
    </div>\
   <div class="' + ico1 + '">\
     <div class="' + ico2 + '">\
        <div></div><div></div>\
        <div></div><div></div>\
        <div></div><div></div>\
        <div></div><div></div>\
      </div>\
    </div>   \
  </div></section>';
}

function getIcon(code) {
  switch (code) {
    case 27:
    default:
      // calling doe cloud-rain, 
      return getTemplate2('cloud', 'rain');
  }
}
//Docs at http://simpleweatherjs.com
$(document).ready(function() {
  $.simpleWeather({
    location: 'Austin, TX',
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = getIcon(weather.code);
      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.wind.direction + ' ' + weather.wind.speed + ' ' + weather.units.speed + '</li></ul>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>' + error + '</p>');
    }
  });
});
/*
  Docs at http://http://simpleweatherjs.com

  Look inspired by http://www.degreees.com/
  Used for demo purposes.

  Weather icon font from http://fonts.artill.de/collection/artill-weather-icons

  DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break.
*/

@font-face {
  font-family: 'weather';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
  font-weight: normal;
  font-style: normal;
}

html {
  width: 100%;
  height: 100%;
  background: #1192d3 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/austin-2.jpg) no-repeat bottom right;
  background-size: cover;
}

body {
  padding: 45px 0;
  font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

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

i {
  color: #fff;
  font-family: weather;
  font-size: 150px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
  text-transform: none;
}

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


/** Custom icons */

section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: 24em;
  justify-content: center;
  margin: 1px;
}

.icon {
  flex: none;
  position: relative;
  border-radius: 3rem;
  height: 16.25rem;
  width: 16.25rem;
  display: inline-block;
  margin: 2px auto;
  background: linear-gradient(to bottom, #1d65f0 0%, #1ad3fd 100%);
}

.cloud:after,
.cloud:before {
  content: '';
  position: absolute;
  z-index: 2;
  background: #fff;
}

.cloud {
  z-index: 1;
  width: 9.75rem;
  height: 3.75rem;
  background: #fff;
  border-radius: 6.25rem;
  -webkit-border-radius: 6.25rem;
  -moz-border-radius: 6.25rem;
  position: absolute;
  top: 7.9375rem;
  left: 1.75rem;
  opacity: 0.9;
  box-shadow: 0 0 17px 5px rgba(240, 240, 240, 0.7), inset -1px 8px 1px rgba(230, 230, 230, 0.5);
}

.cloud:after {
  width: 4.6875rem;
  height: 4.6875rem;
  top: -1.9375rem;
  left: 0.75rem;
  border-radius: 6.25rem;
  box-shadow: inset -5px 10px 4px rgba(230, 230, 230, 0.5);
}

.cloud:before {
  width: 5.625rem;
  height: 5.625rem;
  top: -2.8125rem;
  right: 1.5625rem;
  z-index: 1;
  border-radius: 12.5rem;
  box-shadow: -10px 30px 0px #fff, inset -5px 0px 4px rgba(230, 230, 230, 0.5);
}

.cloud:nth-child(2) {
  z-index: 0;
  background: #fff;
  opacity: 0.4;
  transform: scale(0.5) translate( -8rem, -7rem);
  animation: cloud 8s linear infinite;
}

.cloud:nth-child(2)>.rain div {
  z-index: -1;
}

.rain div {
  content: ' ';
  position: absolute;
  z-index: 1;
  display: block;
  top: 110%;
  left: 50%;
  height: 0.5rem;
  width: 0.5rem;
  background: #4d90fe;
  background: linear-gradient(to bottom, #3987c9 0%, #e1e5ed 100%);
  border-radius: 100% 0 80% 80% / 80% 0 100% 80%;
  transform: rotate(-30deg);
  opacity: 0;
  animation: rain 0.7s infinite ease-in;
}

.rain div:nth-child(2) {
  left: 25%;
  animation-delay: 0.3s;
}

.rain div:nth-child(3) {
  left: 70%;
  top: 105%;
  animation-delay: 0.6s;
}

.rain div:nth-child(4) {
  left: 40%;
  top: 105%;
  z-index: -1;
  animation-delay: 0.9s;
}

.rain div:nth-child(5) {
  left: 90%;
  top: 80%;
  animation-delay: 1.2s;
}

.rain div:nth-child(6) {
  left: 20%;
  top: 80%;
  animation-delay: 1.5s;
}

.rain div:nth-child(7) {
  left: 55%;
  top: 75%;
  animation-delay: 1.9s;
}

.rain div:nth-child(1) {
  left: 75%;
  top: 75%;
  animation-delay: 2.2s;
}

@keyframes rain {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-30px, 100px) skewY(-30deg);
  }
}

@keyframes cloud {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: scale(0.7) translate(120%, -7rem);
  }
}
<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>
<!-- Docs at http://http://simpleweatherjs.com -->
<div id="weather"></div>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.