Weather CSS Mapping

December 15, 2020 ยท View on GitHub

WundergroundDarkskyOpenweathermapIcon Nameicon
wi-wu-clear
wi-wu-sunny
wi-darksky-clear-daywi-owm-01df00d
wi-wu-nt_clear
wi-wu-nt_mostlysunny
wi-wu-nt_sunny
wi-darksky-clear-nightwi-owm-01nf02e
wi-wu-chancerainwi-darksky-rainwi-owm-10df019
wi-wu-chancesnow
wi-wu-snow
wi-darksky-snowwi-owm-13df01b
wi-wu-chancesleet
wi-wu-sleet
wi-darksky-sleetf0b5
wi-wu-fogwi-darksky-fogwi-owm-50df014
wi-darksky-windf050
wi-darksky-cloudywi-owm-04df013
wi-wu-cloudy
wi-wu-mostlycloud
wi-wu-partlycloudy
wi-wu-partlysunny
wi-darksky-partly-cloudy-daywi-owm-03df002
wi-wu-nt_partlysunnywi-darksky-partly-cloudy-nightwi-owm-04nf086
wi-darksky-hailf015
wi-wu-chancetstorm
wi-wu-tstorms
wi-darksky-thunderstormwi-owm-11df01e
wi-darksky-tornadof056
wi-wu-mostlysunnywi-owm-02df00c
wi-owm-09df017
wi-wu-nt_mostlycloudy
wi-wu-nt_partlycloudy
wi-owm-02nf081
wi-wu-nt_hazywi-owm-03nf07e
wi-owm-09nf026
wi-wu-nt_chancerain
wi-wu-nt_rain
wi-owm-10nf028
wi-owm-11nf02c
wi-wu-nt_chancesnow
wi-wu-nt_snow
wi-owm-13nf02a
wi-wu-nt_fogwi-owm-50nf04a
wi-wu-chanceflurries
wi-wu-flurries
f064
wi-wu-hazyf0b6
wi-wu-rainf01a
wi-wu-nt_chanceflurries
wi-wu-nt_flurries
f067
wi-wu-nt_chancesleet
wi-wu-nt_sleet
f0b4
wi-wu-nt_chancetstorms
wi-wu-nt_tstorms
f02d
wi-wu-nt_cloudyf031

Moon phase CSS Mapping

CSS CodeIcon Nameicon
wi-moon-newf0e1
wi-moon-wax-cresf0da
wi-moon-first-quartf0db
wi-moon-wax-gibbf0dc
wi-moon-fullf0dd
wi-moon-wan-gibbf0de
wi-moon-third-quartf0df
wi-moon-wan-cresf0e0

NOTE - Because the Moon icons are representative of a 'physical moon', it is necessary to have an additional version for the dark theme, to avoid the icon colour becoming inverted. The dark theme version is obtained by adding -dark to the CSS code. For example to get the full moon (light theme version) the code would be wi-moon-full, whilst the same icon for a dark theme, the CSS code would be wi-moon-full-dark.

Direction pointers

CSS CodeIcon Nameicon
wi-arrowf0d1
wi-directionf0d2