Javascript 如何通过amazon web服务更改yahoo weather api的字体或图标

基于此示例，我想为其他人更改天气图标，例如，这些图标是使用

font-family:weather生成的并根据每个字母进行替换示例：

.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代码：

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

您必须为所有代码创建一个模板数组，以便每个代码都有特定的模板，然后将代码传递给一个函数，该函数将为该代码生成HTML。请参阅下面的代码片段，我已经为Cloud Rain图标制作了示例，类似地，您可以创建其他模板


//v3.1.0
函数getTemplate2（ico1，ico2）{
返回'\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
';
}
函数getIcon（代码）{
开关（代码）{
案例27：
违约：
//叫多伊云雨，
返回getTemplate2（'cloud'，'rain'）；
}
}
//文档位于http://simpleweatherjs.com
$（文档）.ready（函数（）{
$.SimpleWither({
地点：“德克萨斯州奥斯汀”，
可悲的是：“，
单位：f，
成功：功能（天气）{
html=getIcon（weather.code）；
html+=''+weather.temp+'°；'+weather.units.temp+''；
html+='
'+weather.city+'、'+weather.region+'
'；
html+='
'+weather.current+'
'；
html+='
'+weather.wind.direction+'+weather.wind.speed+'+weather.units.speed+'
'；
$（“#weather”）.html（html）；
},
错误：函数（错误）{
$（“#weather”）.html（“”+错误+”
”）；
}
});
});
/*
文档位于http://http://simpleweatherjs.com
看起来灵感来自http://www.degreees.com/
用于演示目的。
天气图标字体来自http://fonts.artill.de/collection/artill-weather-icons
请勿热链接此演示中包含的资源/字体。如果您希望使用相同的字体图标，请通过上面的链接将其下载到您的本地资源中。如果你使用下面的链接，很可能在某个时候它们会被删除，你的版本也会被破坏。
*/
@字体{
字体系列：“天气”；
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“”格式（'embedded-opentype'），url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff“）格式（'woff'），url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf“）格式（'truetype'），url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
html{
宽度：100%；
身高：100%；
背景：#1192d3 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/austin-2.jpg)无重复右下角；
背景尺寸：封面；
}
身体{
填充：45px0；
字体：13px‘开放式Sans’，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
}
#天气{
宽度：500px；
保证金：0px自动；
文本对齐：居中；
文本转换：大写；
}
我{
颜色：#fff；
字体系列：天气；
字体大小：150px；
字体大小：正常；
字体风格：普通；
线高：1.0；
文本转换：无；
}
.icon-0:之前{
内容：“：”；
}
.icon-1：之前{
内容：“p”；
}
.icon-2：之前{
内容：“S”；
}
.icon-3：之前{
内容：“Q”；
}
.图标4：之前{
内容：“S”；
}
.图标5：之前{
内容：“W”；
}
.图标6：之前{
内容：“W”；
}
.icon-7：之前{
内容：“W”；
}
.icon-8：之前{
内容：“W”；
}
.icon-9：之前{
内容：“我”；
}
.图标-10：之前{
内容：“W”；
}
.icon-11：之前{
内容：“我”；
}
.icon-12：之前{
内容：“我”；
}
.icon-13：之前{
内容：“我”；
}
.icon-14：之前{
内容：“我”；
}
.icon-15：之前{
内容：“W”；
}
.icon-16：之前{
内容：“我”；
}
.icon-17：之前{
内容：“W”；
}
.icon-18：之前{
内容：“U”；
}
.icon-19：之前{
内容：“Z”；
}
.icon-20：之前{
内容：“Z”；
}
.icon-21：之前{
内容：“Z”；
}
.icon-22：之前{
内容：“Z”；
}
.icon-23：之前{
内容：“Z”；
}
.icon-24：之前{
内容：“E”；
}
.icon-25：之前{
内容：“E”；
}
.icon-26：之前{
内容：“3”；
}
.icon-27：之前{
内容：“a”；
}
.icon-28：之前{
内容：“A”；
}
.icon-29：之前{
内容：“a”；
}
.icon-30：之前{
内容：“A”；
}
.icon-31：之前{
内容：“6”；
}
.icon-32：之前{
内容：“1”；
}
.icon-33：之前{
内容：“6”；
}
.icon-34：之前{
内容：“1”；
}
.icon-35：之前{
内容：“W”；
}
.icon-36：之前{
内容：“1”；
}
.icon-37：之前{
内容：“S”；
}
.icon-38：之前{
内容：“S”；
}
.icon-39：之前{
内容：“S”；
}
.icon-40：之前{
内容：“M”；
}
.icon-41：之前{
内容：“W”；
}
.icon-42：之前{
内容：“我”；
}
.icon-43：之前{
内容：“W”；
}
.icon-44：之前{
内容：“a”；
}
.icon-45：之前{
内容：“S”；
}
.icon-46：之前{
内容：“U”；
}
.icon-47：之前{
内容：“S”；
}
#天气h2{
边际：0.08像素；
颜色：#fff；
字体大小：100px；
字体大小：300；
文本对齐：居中；
文本阴影：0px 1px 3px rgba（0,0,0,0.15）；
}
#天气预报{
保证金：0；
填充：0；
}
#李天气{
背景：#fff；
背景：rgba（255，255，255，0.90）；
填充：20px；
显示：内联块；
边界半径：5px；
}
#天气，目前{
利润率：0.20px；
}
/**自定义图标*/
部分{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：居中；
最小高度：24em；
证明内容：中心；
保证金：1px；
}
.图标{
flex：无；
位置：相对位置；
边界半径：3rem；
身高：16.25雷姆；
宽度：16.25雷姆；
显示：内联块；
保证金：2倍自动；
背景：线性梯度（至底部，#1d65f0 0%，#1ad3fd 100%）；
}
云：之后，
.云：以前{
内容：''；
位置：绝对位置；
z指数：2；
背景：#fff；
}
.云{
z指数：1；
宽度：9.75雷姆；
高度：3.75雷姆；
背景：#fff；
// 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>');
    }
  });
});

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

...
}