• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

How Can I change the icons of the weather

Scheduled Pinned Locked Moved Forum
weathericons
3 Posts 3 Posters 1.5k Views 3 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.
  • D Offline
    diegocastillo01
    last edited by Jun 3, 2020, 11:56 PM

    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

    S 1 Reply Last reply Jun 4, 2020, 1:11 PM Reply Quote -1
    • S Offline
      sdetweil
      last edited by sdetweil Jun 4, 2020, 11:45 AM Jun 4, 2020, 11:44 AM

      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

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 1
      • S Offline
        Stoffbeuteluwe Project Sponsor @diegocastillo01
        last edited by Jun 4, 2020, 1:11 PM

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

        1 Reply Last reply Reply Quote 1
        • 1 / 1
        1 / 1
        • First post
          1/3
          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