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) 创作。

许可

• 根据SIL OFL 1.1许可的天气图标
• 根据麻省理工学院许可获得许可的代码
• 根据CC BY 3.0许可的文档