MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Weather Module - Broken Icon

    Scheduled Pinned Locked Moved Solved Troubleshooting
    6 Posts 2 Posters 568 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      sdetweil @fgvmkl6rdfevr4
      last edited by

      @fgvmkl6rdfevr4 are you running on windows perhaps?

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      F 1 Reply Last reply Reply Quote 0
      • F Offline
        fgvmkl6rdfevr4 @sdetweil
        last edited by

        @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

        1 Reply Last reply Reply Quote 0
        • F Offline
          fgvmkl6rdfevr4
          last edited by

          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.

          S 1 Reply Last reply Reply Quote 1
          • S Offline
            sdetweil @fgvmkl6rdfevr4
            last edited by

            @fgvmkl6rdfevr4 nice detective work…

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            F 1 Reply Last reply Reply Quote 0
            • F Offline
              fgvmkl6rdfevr4 @sdetweil
              last edited by

              @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.

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy