MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    How Can I change the icons of the weather

    Forum
    weather icons
    3
    3
    857
    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.
    • D
      diegocastillo01 last edited by

      Hi, I was wondering if someone could help me figure out how to change the icons of the current weather and forecast weather default modules, to the ones that are here:

      This is my first MM so all the help is very appreciated

      https://codepen.io/joshbader/pen/EjXgqr

      Stoffbeuteluwe 1 Reply Last reply Reply Quote -1
      • S
        sdetweil last edited by sdetweil

        from my post in discord channel

        both modules use a table of icon class names

                iconTable: {
                    "01d": "wi-day-sunny",
                    "02d": "wi-day-cloudy",
                    "03d": "wi-cloudy",
                    "04d": "wi-cloudy-windy",
                    "09d": "wi-showers",
                    "10d": "wi-rain",
                    "11d": "wi-thunderstorm",
                    "13d": "wi-snow",
                    "50d": "wi-fog",
                    "01n": "wi-night-clear",
                    "02n": "wi-night-cloudy",
                    "03n": "wi-night-cloudy",
                    "04n": "wi-night-cloudy",
                    "09n": "wi-night-showers",
                    "10n": "wi-night-rain",
                    "11n": "wi-night-thunderstorm",
                    "13n": "wi-night-snow",
                    "50n": "wi-night-alt-cloudy-windy"
                },
        

        and both modules reference the weather-icons.css file
        ./vendor/node_modules/weathericons/css/weather-icons.css
        which links the classname to a fontawesome icon

        you can add entries to the ~/MagicMirror/css/custom.css for those modules to replace the names with new icon references

        .currentweather .wi-night-cloudy {
             ???? for the new icon for cloudy night, 
        };
        

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 1
        • Stoffbeuteluwe
          Stoffbeuteluwe Project Sponsor @diegocastillo01 last edited by

          @diegocastillo01 https://forum.magicmirror.builders/topic/7227/changing-icons-of-the-modules-current-weather-and-weather-forecast

          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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy