217

0

Weather Icons

Weather Icons 是唯一具有 222 个天气主题图标的图标字体和 CSS,可以直接放入Bootstrap或任何需要高质量天气、海洋和气象图标的项目!

Weather Icons

222个天气主题图标和CSS

Weather Icons 是唯一具有 222 个天气主题图标的图标字体和 CSS,可以直接放入Bootstrap或任何需要高质量天气、海洋和气象图标的项目!

https://erikflowers.github.io/weather-icons/开始!

图标预览

基本用法

将 5 个字体文件和主 weather-icons.min.css文件放在项目中,假设字体位于 ../CSS 目录之上。

通过使用一个 i元素并添加基类 wi,然后添加您想要的图标类(例如 )来显示图标 day-sunny。这看起来像 <i class="wi wi-day-sunny"></i>

要添加修饰符,请在图标名称后包含您想要的类,看起来像 <i class="wi wi-day-sunny wi-flip-vertical"></i>。您可以翻转、旋转或添加固定宽度。在https://erikflowers.github.io/weather-icons/查看所有内容。

接口使用

该集合包括用于流行天气服务 API 的配套 CSS 文件。目前有 Forecast.io、Open Weather Map、World Meteorological Organization、Weather Underground 和 Yahoo 的地图。检查API 列表以查看类名。

风的使用

要使用风指示器,您还必须使用 weather-icons-wind.min.css默认的 CSS 文件。要显示风向指示器,您必须使用基类 wiand wi-wind,然后包含您想要的朝向/来自方向,例如 from-293-deg。这最终看起来像 . 您可以以这种方式使用从 0 到 359 的任何度数。注意: “from”类的箭头点位于度数的另一端。例如,“从 90 度”图标将指向 270 度标记,而“向 270 度”图标将指向相同的 270 度标记。

集合中还包括指向基本方向的别名。它们的工作原理与度数相同,例如 <i class="wi wi-wind towards-sse"></i>,箭头指向东南偏南(大约 158 度)。

贡献

如果您非常想添加图标创意、图标艺术或其他对包工作方式的修复/更改,请随时提供帮助!

信用

图标设计最初由Lukas Bischoff设计。v1.1 forward、HTML、Less 和 CSS 的图标艺术由我 (Erik) 创作

许可