How to add custom weather icons

kool

@kool
Bumping this back up. Pleeeease help

sdetweil

@kool said in How to add custom weather icons:

/home/kool/MagicMirror/css/icons/6fa/night.svg

we will never load file urls…

you need to make them MM specific

  http://localhost:mmport/css....
  or 
  /css/...   (relative to the same server mm is loaded from)

the mm web server root is the the MagicMirror folder

kool

@sdetweil
I’m confused what you mean

sdetweil

@kool in your custom.csss

/* Current Weather Icons */
.currentweather .wi-day-sunny {
 content: url("/home/kool/MagicMirror/css/icons/6fa/day.svg") !important;

}

the url will not work… our web server will only load things in the MM folder
so you have to use the http:// exact or
the / relative url

rkorell

@kool said

Bumping this back up. Pleeeease help

Dear @kool ,

if you are using url as suggested by Sam ( @sdetweil ), you are nearly done.
As far as I can see from my rookie perspective you do have some redundancies in your config.js (e.g. the unit section: units, tempUnits, windUnits) ) but this shouldn’t disturb.
As far as I understood you can delete these icontables because you do not use the icon-font but try to use some images from sigle file-URLs instead - so you can delete the whole section iconTable {} with all entries.

In addition you have to adapt (see above, Sam’s tip) the URL of all you images in your custom.css file.
(pls. double check, if the files are really in these locations)
You wrote in your current css

.weatherforecast .wi-day-sunny {
content: url("/home/kool/MagicMirror/css/icons/6fas/day.svg") !important;

}

IF your weather-icon files are really in this directory (/home/kool/MagicMirror/css/icons/6fas/) than your css should be as follows:

.weatherforecast .wi-day-sunny {
 content: url("/css/icons/6fas/day.svg");

You do not need the !important flag (in my case)

second wrong thing besides the URL is your qualifier.

you are using

.weatherforecast .wi-something  ....

This cannot be recognized because .weatherforecast is not defined.

At first you have to decide if you want to have different icons for the current weather and for the weather forecast.
(In my case this is true).
IF you would like to have this you have to differentiate the two instances of the weather-module by a “classes” definition.

For example your first instance of the weather module (current weather) than should be

   module: "weather",
    position: "top_right", // Adjust position as needed
    classes: "weather_current",
    config: {
        weatherProvider: "openmeteo", // Specify the Open-Meteo provider
        apiBase: "https://api.open-meteo.com/v1", // REQUIRED: Base URL for Open-Meteo

       lat: xxxx, // REQUIRED: Latitude of the location
        lon: xxxx, // REQUIRED: Longitude of the location
        maxNumberOfDays: 8, // OPTIONAL: Number of forecast days (default is 5)
        pastDays: 0, // OPTIONAL: Number of past days of data to include (default is 0)
   units: "imperial", // Set this to 'imperial' for Fahrenheit and miles per hour
        tempUnits: "imperial", // Make sure to match with 'imperial'
        windUnits: "imperial",
        type: "current", // OPTIONAL: Change to "current" if only current weather data is desired

 
    }
},

(pay attention for the third line: classes: “weather_current”, )
THIS is your qualifier if you are about to diffrentiate between current weather and weather forecast image-wise.
(“weather_current” is just an example! you can name it like you want every name is suitable and OK, only pay attention that all of these namings are strictly case sensitive, so Weather is NOT the same as weather"

Your correct line for custom.css than is:

.weather_current .wi-day-sunny {
 content: url("/css/icons/6fas/day.svg");

and the same dance than for your second instance with DIFFERENT classes-clause in config.js
(e.g. a " classes: “weather_forecast”, " in the definition of the second weather instance ) results in a custom.css entry like this:

.weather_forecast .wi-day-sunny {
 content: url("/css/icons/some_other_directory_with_smaller_icons/day.svg");

Because the “forecast instance” of the weather module is (in my case) organized as table I found it really useful to differentite these logos - big ones for current, smaller ones for the forecast:

ScreenFloat Bildschirmfoto von Sublime Text am 14_04_2025, 13_38_51 14_04_2025, 13-38-51.jpg

If You do NOT like to differentiate the current and forecast instance you do NOT need the classes-phrase in config.js and your correct qualifier is the name of the module (so “weather” ) and your custom.css entry is like this:

.weather .wi-day-sunny {
 content: url("/css/icons/6fas/day.svg");

And this than is valid for both instances.

Keep in mind that there are a LOT more weather conditions than the two times 5 conditions you have defined in your current custom.css!

my own definition for the current weather for your reference:


.weather_current .wi-fog  {
content: url("/css/icons/current/wsymbol_0007_fog.png");
}
.weather_current .wi-cloudy  {
content: url("/css/icons/current/wsymbol_0002_sunny_intervals.png");
}
.weather_current .wi-cloudy-windy {
content: url("/css/icons/current/wsymbol_0004_black_low_cloud.png");
}
.weather_current .wi-rain  {
content: url("/css/icons/current/wsymbol_0018_cloudy_with_heavy_rain.png");
}
.weather_current .wi-showers  {
content: url("/css/icons/current/wsymbol_0017_cloudy_with_light_rain.png");
}
.weather_current .wi-thunderstorm  {
content: url("/css/icons/current/wsymbol_0024_thunderstorms.png");
}
.weather_current .wi-snow  {
content: url("/css/icons/current/wsymbol_0019_cloudy_with_light_snow.png");
}
.weather_current .wi-snowflake-cold {
content: url("/css/icons/current/wsymbol_0020_cloudy_with_heavy_snow.png");
}
.weather_current .wi-na {
content: url("/css/icons/current/wsymbol_0999_unknown.png");
} 

.weather_current .wi-day-sunny  {
  content: url("/css/icons/current/wsymbol_0001_sunny.png");
}
.weather_current .wi-day-cloudy  {
  content: url("/css/icons/current/wsymbol_0043_mostly_cloudy.png");
}
.weather_current .wi-day-cloudy-gusts  {
  content: url("/css/icons/current/wsymbol_0004_black_low_cloud.png");
}
.weather_current .wi-day-cloudy-windy  {
  content: url("/css/icons/current/wsymbol_0004_black_low_cloud.png");
}
.weather_current .wi-cloudy-windy  {
  content: url("/css/icons/current/wsymbol_0004_black_low_cloud.png");
}
.weather_current .wi-day-fog  {
  content: url("/css/icons/current/wsymbol_0007_fog.png");
}
.weather_current .wi-day-hail  {
  content: url("/css/icons/current/wsymbol_0015_heavy_hail_showers.png");
}
.weather_current .wi-day-haze  {
  content: url("/css/icons/current/wsymbol_0005_hazy_sun.png");
}
.weather_current .wi-day-lightning  {
  content: url("/css/icons/current/wsymbol_0016_thundery_showers.png");
}
.weather_current .wi-day-rain  {
  content: url("/css/icons/current/wsymbol_0085_extreme_rain_showers.png");
}
.weather_current .wi-day-rain-mix  {
  content: url("/css/icons/current/wsymbol_0009_light_rain_showers.png");
}
.weather_current .wi-day-rain-wind  {
  content: url("/css/icons/current/wsymbol_0010_heavy_rain_showers.png");
}
.weather_current .wi-day-showers  {
  content: url("/css/icons/current/wsymbol_0018_cloudy_with_heavy_rain.png");
}
.weather_current .wi-day-sleet  {
  content: url("/css/icons/current/wsymbol_0087_heavy_sleet_showers.png");
}
.weather_current .wi-day-sleet-storm  {
  content: url("/css/icons/current/wsymbol_0089_heavy_sleet.png");
}
.weather_current .wi-day-snow  {
  content: url("/css/icons/current/wsymbol_0011_light_snow_showers.png");
}
.weather_current .wi-day-snow-thunderstorm  {
  content: url("/css/icons/current/wsymbol_0057_thundery_snow_showers.png");
}
.weather_current .wi-day-snow-wind  {
  content: url("/css/icons/current/wsymbol_0053_blowing_snow.png");
}
.weather_current .wi-day-sprinkle  {
  content: url("/css/icons/current/wsymbol_0009_light_rain_showers.png");
}
.weather_current .wi-day-storm-showers  {
  content: url("/css/icons/current/wsymbol_0018_cloudy_with_heavy_rain.png");
}
.weather_current .wi-day-sunny-overcast  {
  content: url("/css/icons/current/wsymbol_0002_sunny_intervals.png");
}
.weather_current .wi-day-thunderstorm  {
  content: url("/css/icons/current/wsymbol_0024_thunderstorms.png");
}
.weather_current .wi-day-windy  {
  content: url("/css/icons/current/wsymbol_0060_windy.png");
}
.weather_current .wi-solar-eclipse  {
  content: url("/css/icons/current/wsymbol_0005_hazy_sun.png");
}
.weather_current .wi-hot  {
  content: url("/css/icons/current/wsymbol_0045_hot.png");
}
.weather_current .wi-day-cloudy-high  {
  content: url("/css/icons/current/wsymbol_0006_mist.png");
}
.weather_current .wi-day-light-wind  {
  content: url("/css/icons/current/wsymbol_0060_windy.png");
}
.weather_current .wi-night-clear  {
  content: url("/css/icons/current/wsymbol_0008_clear_sky_night.png");
}
.weather_current .wi-night-alt-cloudy  {
  content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png");
}
.weather_current .wi-night-alt-partly-cloudy  {
  content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png");
}
.weather_current .wi-night-alt-cloudy-gusts  {
  content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png");
}
.weather_current .wi-night-alt-cloudy-windy  {
  content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png");
}
.weather_current .wi-night-alt-hail  {
  content: url("/css/icons/current/wsymbol_0031_heavy_hail_showers_night.png");
}
.weather_current .wi-night-alt-lightning  {
  content: url("/css/icons/current/wsymbol_0032_thundery_showers_night.png");
}
.weather_current .wi-night-alt-rain  {
  content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png");
}
.weather_current .wi-night-alt-rain-mix  {
  content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png");
}
.weather_current .wi-night-alt-rain-wind  {
  content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png");
}
.weather_current .wi-night-alt-showers  {
  content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png");
}
.weather_current .wi-night-alt-sleet  {
  content: url("/css/icons/current/wsymbol_0029_sleet_showers_night.png");
}
.weather_current .wi-night-alt-sleet-storm  {
  content: url("/css/icons/current/wsymbol_0029_sleet_showers_night.png");
}
.weather_current .wi-night-alt-snow  {
  content: url("/css/icons/current/wsymbol_0028_heavy_snow_showers_night.png");
}
.weather_current .wi-night-alt-snow-thunderstorm  {
  content: url("/css/icons/current/wsymbol_0075_thundery_snow_showers_night.png");
}
.weather_current .wi-night-alt-snow-wind  {
  content: url("/css/icons/current/wsymbol_0071_blowing_snow_night.png");
}
.weather_current .wi-night-alt-sprinkle  {
  content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png");
}
.weather_current .wi-night-alt-storm-showers  {
  content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png");
}
.weather_current .wi-night-alt-thunderstorm  {
  content: url("/css/icons/current/wsymbol_0032_thundery_showers_night.png");
}
.weather_current .wi-night-cloudy  {
  content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png");
}
.weather_current .wi-night-cloudy-gusts  {
  content: url("/css/icons/current/wsymbol_0044_mostly_cloudy_night.png");
}
.weather_current .wi-night-cloudy-windy  {
  content: url("/css/icons/current/wsymbol_0044_mostly_cloudy_night.png");
}
.weather_current .wi-night-fog  {
  content: url("/css/icons/current/wsymbol_0064_fog_night.png");
}
.weather_current .wi-night-hail  {
  content: url("/css/icons/current/wsymbol_0039_cloudy_with_heavy_hail_night.png");
}
.weather_current .wi-night-lightning  {
  content: url("/css/icons/current/wsymbol_0032_thundery_showers_night.png");
}
.weather_current .wi-night-partly-cloudy  {
  content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png");
}
.weather_current .wi-night-rain  {
  content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png");
}
.weather_current .wi-night-rain-mix  {
  content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png");
}
.weather_current .wi-night-rain-wind  {
  content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png");
}
.weather_current .wi-night-showers  {
  content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png");
}
.weather_current .wi-night-sleet  {
  content: url("/css/icons/current/wsymbol_0029_sleet_showers_night.png");
}
.weather_current .wi-night-sleet-storm  {
  content: url("/css/icons/current/wsymbol_0029_sleet_showers_night.png");
}
.weather_current .wi-night-snow  {
  content: url("/css/icons/current/wsymbol_0027_light_snow_showers_night.png");
}
.weather_current .wi-night-snow-thunderstorm  {
  content: url("/css/icons/current/wsymbol_0075_thundery_snow_showers_night.png");
}
.weather_current .wi-night-snow-wind  {
  content: url("/css/icons/current/wsymbol_0028_heavy_snow_showers_night.png");
}
.weather_current .wi-night-sprinkle  {
  content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png");
}
.weather_current .wi-night-storm-showers  {
  content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png");
}
.weather_current .wi-night-thunderstorm  {
  content: url("/css/icons/current/wsymbol_0032_thundery_showers_night.png");
}

HTH & good luck!
Ralf