• 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 to change icons

Scheduled Pinned Locked Moved Custom CSS
15 Posts 5 Posters 12.8k Views 5 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.
  • L Offline
    Lahim
    last edited by Jul 30, 2018, 8:52 AM

    Thank you for helping me but I changed config.js to

    defaultSymbol: "calendar",
    

    And icons are same, nothing changed. Does not matter if it is holiday or event 1 or event 2 - icons are same.

    I still do not understand - how to define icon for the specyfic event?

    J 2 Replies Last reply Aug 2, 2018, 6:59 PM Reply Quote 0
    • J Offline
      justjim1220 Module Developer @Lahim
      last edited by Aug 2, 2018, 6:59 PM

      @lahim

      Apologies, been kinda busy last few days…

      I am looking for the answer to your question.

      I haven’t used the default calendar for quite a while now.

      I really like the MMM-CalendarExt modules, although, I never really thought about it until now, it’s the same way… same icon for each event.

      I shall do some researching to see if I can find a solution…

      "Life's Too Short To Dance With Ugly People"
      Jim Hallock - 1995

      1 Reply Last reply Reply Quote 0
      • J Offline
        justjim1220 Module Developer @Lahim
        last edited by Aug 2, 2018, 8:05 PM

        @lahim

        OK, I think I may have found the solution…

        I’ll start by showing you my calendar categories:
        0_1533238944252_Screenshot (20).png

        This might be helpful to have handy…

        Font Awesome Cheat Sheet

        Now the code to put in your config.js file in the calendar code:

        "calendars": [
          {
            "name": "Family Stuff",
            "symbol": "heart@fa",
            "url": "Calendar link here"
            "interval": 24*60*60*1000,
          },
          {
            "name": "US Holiday",
            "url": "Calendar link here",
            "symbol": "gift@fa",
            "interval": 24*60*60*1000,
            "maxEntries": 50, "maxDays":365,
          },
          {
          // "name": "Birthdays",
             "symbol": "birthday=cake",
             "url": "Calendar link here",
          },
          {
          // "name": "KC Chiefs",
             "symbol": "football-ball@fa",
             "url": "Calendar link here",
             "interval": 24*60*60*1000,
          },
          {
          // "name": "NFL Games",
             "symbol": "calendar",
             "url": "football-ball@fa",
             "interval": 24*60*60*1000,
          },
          {
             "name": "NFL Playoff Games",
             "symbol": "user-secret@fa",
             "url": "football-ball@fa",
             "interval": 24*60*60*1000,
          },
        ],
        

        Let me know if this works for you.
        I have yet to try it, but now that I found it, I think I will. :winking_face:

        "Life's Too Short To Dance With Ugly People"
        Jim Hallock - 1995

        1 Reply Last reply Reply Quote 0
        • L Offline
          Lahim
          last edited by Aug 5, 2018, 10:11 PM

          Thank you very much - I have it working now!!!

          I used this post
          https://github.com/MichMich/MagicMirror/pull/1345
          to add font-awesome5 but I am not able to get all of them working. Anyway, now I understand all.
          Thank you.

          1 Reply Last reply Reply Quote 0
          • E Offline
            eshwaran23
            last edited by Aug 23, 2018, 12:43 PM

            i have tried all methods to change my icons for the current weather and the weather forcast modules but nothing seems to work ! i dont get any errors or warnings ! whatever changes i make the module remains the same ( like default)
            i use icons from amcharts ! and i refered the other post from the forum ! im a noobie kindly help me out@!!!
            the icons are on MagicMirror![1_1535028197192_Webp.net-resizeimage.jpg](Uploading 100%) ![0_1535028197191_Webp.net-resizeimage (1).jpg](Uploading 100%) /css/icons/
            i have attached images of my custom css file and my config file

            1 Reply Last reply Reply Quote 0
            • 1
            • 2
            • 2 / 2
            • 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