使用

和风天气图标使用SVG格式,因此你可以通过多种方式进行使用,包括使用图标字体、以svg标签嵌入网页或当作图片处理,当然你也可以下载到本地进行再创作。

对于和风天气API/SDK的开发者来说,图标名称或样式名称与天气API/SDK中的icon字段是一样的,因此当你通过API/SDK获得天气icon时,只需要匹配上对应的图标即可。

例如,API返回"icon":"301",那么你只需要使用301.svg这张图片或者<i class="qi-301"></i>这个图标字体。

嵌入#

使用svg标签将图标嵌入到你的网站中。

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="qi-301" viewBox="0 0 16 16"><path d="M7.012 14.985a1 1 0 0 0 2 0 6.605 6.605 0 0 0-1-2 6.605 6.605 0 0 0-1 2zM3.959 14a1 1 0 0 0 2 0 6.605 6.605 0 0 0-1-2 6.605 6.605 0 0 0-1 2zm6.028 0a1 1 0 0 0 2 0 6.605 6.605 0 0 0-1-2 6.605 6.605 0 0 0-1 2zM5.207 1.904h.007a.5.5 0 0 0 .493-.506L5.695.494a.5.5 0 0 0-.5-.494h-.007a.5.5 0 0 0-.493.506l.012.905a.5.5 0 0 0 .5.493zm-2.892.946a.5.5 0 1 0 .698-.716l-.648-.63a.5.5 0 1 0-.697.715zm-.179 2.203a.5.5 0 0 0-.5-.493h-.007l-.905.011a.5.5 0 0 0 .007 1h.007l.904-.011a.5.5 0 0 0 .494-.507zm5.638-2.12a.5.5 0 0 0 .359-.151l.63-.648a.5.5 0 0 0-.716-.698l-.631.648a.5.5 0 0 0 .358.849z"/><path d="M12.028 5.579a2.927 2.927 0 0 0-.37.037 4.364 4.364 0 0 0-7.316 0 2.926 2.926 0 0 0-.37-.037 2.972 2.972 0 1 0 1.16 5.709 4.302 4.302 0 0 0 5.735 0 2.972 2.972 0 1 0 1.16-5.71zm0 4.944a1.959 1.959 0 0 1-.77-.156 1 1 0 0 0-1.05.168 3.303 3.303 0 0 1-4.417 0 1 1 0 0 0-1.05-.168 1.972 1.972 0 1 1-.769-3.788 1.077 1.077 0 0 1 .15.017l.095.012a1 1 0 0 0 .962-.444 3.364 3.364 0 0 1 5.642 0 1 1 0 0 0 .962.444l.095-.012a1.08 1.08 0 0 1 .15-.017 1.972 1.972 0 1 1 0 3.944zM2.482 5.315A3.53 3.53 0 0 1 3.5 5.027a1.831 1.831 0 0 1 1.81-1.603 1.81 1.81 0 0 1 .553.095 4.933 4.933 0 0 1 1.281-.405A2.82 2.82 0 0 0 2.476 5.26c0 .02.006.037.006.056z"/></svg>

使用图片#

SVG格式的图标也可以被视为一张普通图片,就像平时一样在网页中使用img标签插入图片。

<img src="/some/path/301.svg" alt="QWeather" width="32" height="32">

图标字体#

和风天气图标提供了图标字体,当你使用CDN引入样式表或者在本地项目中导入后,你就可以像使用其他图标字体一样使用。

<i class="qi-301"></i>

CSS#

你可以将SVG加入到你的CSS中,请注意svg的颜色需要用%23代替#

.someClass::after {
  content: "";
  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill='%23066ff5' class="qi-102-fill" viewBox="0 0 16 16"><path d="M8 3a4.99 4.99 0 0 0-4.18 2.267 3.345 3.345 0 0 0-.423-.042 3.397 3.397 0 1 0 1.326 6.524 4.917 4.917 0 0 0 6.554 0 3.397 3.397 0 1 0 1.326-6.524 3.345 3.345 0 0 0-.423.042A4.99 4.99 0 0 0 8 3z"/></svg>");
  background-repeat: no-repeat;
}

如果你已经引用了和风天气图标字体,你还可以这样使用:

.someClass::before {
    font-family: "qweather-icons" !important;
    content: "\f110";
  }

下载#

如果你需要修改和风天气图标,或者想使用这些图标在其他地方,你当然可以下载最新版本的全部图标到本地,打造更加个性化的图标,并可以导出为各种你喜欢的格式,比如.png/.jpg等等。