Weather Module - Broken Icon

[fgvmkl6rdfevr4]

Hi Forum,

After I applied the last update of MagicMirror (2.27.0), the weather module does not display the icon of the current weather anymore. Instead, it shows only a square (like the icon is broken).

I really appreciate any help.

Extract of the module config (from config.js):

{
                        module: "weather",
                        position: "top_left",
                        disabled: false,
                        config: {
                                weatherProvider: "openweathermap",
                                type: "current",
                                location: "Fürth",
                                locationID: "2923544", //ID from http://bulk.openweathermap.org/sample/city.list.json.>
                                apiKey: "70908162b9e2f94e913zxxxxxxed76b425",
//                              decimalSymbol: ",",
                                roundTemp: true,
//                              onlyTemp: "true",
                                appendLocationNameToHeader: true,
                                initialLoadDelay: "1000",
                                showHumidity: "wind",
                                showWindDirection: true,
                                showWindDirectionAsArrow: false,
                                windUnits: "metric",
                                useKmh: "true",
                                showSun: false,
                                useBeaufort: false
                        }
                },

Extract from custom.css:

.weather .weathericon,
.weather .fa-home {
        font-size: 130%;
        line-height: 170px;
        color: #aaa;
        display: inline-block;
        transform: translate(0, -3px);
        transform: translateY(0%);
}

.weather {
        font-size: 125px;
}

Thank you

[fgvmkl6rdfevr4]

I did some more troubleshooting and found the issue.

I first uninstalled MagicMirror (npm uninstall MagicMirror).
In the second step, I renamed the existing MagicMirror directory into MagicMirror_old.

Then I reinstalled it like described here, git clone, npm install-mm, copying default config etc.
After starting MM with the default config, all is fine.

I then copied over my old config.js and restarted MM --> still working fine.

But after copying my custom.css file, the icon was broken again.
After commenting out section by section, this was the section that caused the broken icon:

.light {
        font-family: "Roboto Condensed", sans-serif;
        font-size: 80px;
        line-height: 125px;
        font-weight: 300;
}

I then commented out line by line and as soon as I commented out the “font-family” line, the icon was displayed nicely again.

[sdetweil]

@fgvmkl6rdfevr4 are you running on windows perhaps?

[fgvmkl6rdfevr4]

@sdetweil sorry, I forgot to mention that.

It’s running on a Raspberry Pi 4 B (Rev. 1.2) with Raspberry Pi OS 12 (Bookworm)
Linux 6.1.21-v8+ on aarch64

[fgvmkl6rdfevr4]

I did some more troubleshooting and found the issue.

I first uninstalled MagicMirror (npm uninstall MagicMirror).
In the second step, I renamed the existing MagicMirror directory into MagicMirror_old.

Then I reinstalled it like described here, git clone, npm install-mm, copying default config etc.
After starting MM with the default config, all is fine.

I then copied over my old config.js and restarted MM --> still working fine.

But after copying my custom.css file, the icon was broken again.
After commenting out section by section, this was the section that caused the broken icon:

.light {
        font-family: "Roboto Condensed", sans-serif;
        font-size: 80px;
        line-height: 125px;
        font-weight: 300;
}

I then commented out line by line and as soon as I commented out the “font-family” line, the icon was displayed nicely again.

[sdetweil]

@fgvmkl6rdfevr4 nice detective work…

[fgvmkl6rdfevr4]

@sdetweil thank you :smiling_face_with_smiling_eyes:

Thought that this maybe could help others, too.

Unfortunately, I have no clue (not enough knowledge about CSS, web sites etc.) why this suddenly happened… but that doesn’t matter for me anymore as the weather icon is now looking nice again.