MagicMirror Forum

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

    How to change icons

    Custom CSS
    5
    15
    8057
    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.
    • Hriereb
      Hriereb last edited by

      Hi everyone,
      I recently bought a raspi 3b+ and I’m trying to build my own magic mirror. I don’t anything about codes but I’m willing to learn and feel attracted to this wonderful world. I managed to install magic mirror and I would like to customize some things like fonts and modules icons but I don’t know how and where to start. Is there anyone who can help me? Thanks in advance.

      1 Reply Last reply Reply Quote 0
      • N
        nobita last edited by

        you can start at https://github.com/MichMich/MagicMirror and read in README.md
        step by step

        1 Reply Last reply Reply Quote 0
        • Hriereb
          Hriereb last edited by

          Thank you soso much for your reply, I’ll have a look at it for sure. May I ask you something? Are you italian?

          N 1 Reply Last reply Reply Quote 0
          • N
            nobita @Hriereb last edited by

            @hriereb No fr thailand

            1 Reply Last reply Reply Quote 0
            • Hriereb
              Hriereb last edited by

              Ah ok, thx again.

              1 Reply Last reply Reply Quote 0
              • Hriereb
                Hriereb last edited by

                Hi again, sorry for the silly questions but I don’t how to do this changes. I’ve tried to look for the icons but I don’t know where to start. I would like to change weather icons and calendar but I don’t know where they are and how I could upload different ones. Could someone guide me with a simple explanation for a noob like me? I don’t know anything about CSS or similar and I’m a “newborn” in this world. Hope someone can help and apologize for dumb questions.

                N 2 Replies Last reply Reply Quote 0
                • N
                  nobita @Hriereb last edited by

                  @hriereb Reply first question How to Change Icon Calendar
                  in config.js at module calendar
                  you can see line … symbol: "calendar-check-o ",
                  you can change in other icon such as "calendar-plus-o "
                  if you want any icon you can see in https://fontawesome.com/v4.7.0/icons/

                  1 Reply Last reply Reply Quote 0
                  • N
                    nobita @Hriereb last edited by

                    @hriereb Second Question how to change Weather icon
                    Before you can search word " how to change weathr icon" or “custom.css” in forum
                    and this is link weather Icon at http://erikflowers.github.io/weather-icons/

                    1 Reply Last reply Reply Quote 0
                    • L
                      Lahim last edited by

                      Can somebody write down how to change them?
                      I changed the config.js to symbol: ‘fa fa-calendar’ and nothing changed.

                      @nobita you wrote "you can change in other icon such as "calendar-plus-o " but what is this? A set of icon or what?

                      I am sorry, but I have no idea how to make it working.

                      By the way - there is nothing like step by step tutorial - in README.md there is only a link to fontawsome page but there is nothing written how to use it.

                      justjim1220 1 Reply Last reply Reply Quote 0
                      • justjim1220
                        justjim1220 Module Developer @Lahim last edited by

                        @lahim

                        search fontawesome in google. It shows all the available icons.

                        as far as changing the icon for your calendar, try this…

                        in your config.js file, you need to add this line in the config section of your calendar…

                        defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
                        

                        the following defaults cand be changed in this section as well…

                        maximumEntries: 10, // Total Maximum Entries
                        		maximumNumberOfDays: 365,
                        		displaySymbol: true,
                        		defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
                        		displayRepeatingCountTitle: false,
                        		defaultRepeatingCountTitle: "",
                        		maxTitleLength: 25,
                        		wrapEvents: false, // wrap events to multiple lines breaking at maxTitleLength
                        		fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
                        		animationSpeed: 2000,
                        		fade: true,
                        		urgency: 7,
                        		timeFormat: "relative",
                        		dateFormat: "MMM Do",
                        		fullDayEventDateFormat: "MMM Do",
                        		getRelative: 6,
                        		fadePoint: 0.25, // Start on 1/4th of the list.
                        		hidePrivate: false,
                        		hideOngoing: false,
                        		colored: false,
                        		coloredSymbolOnly: false,
                        		tableClass: "small",
                        		calendars: [
                        			{
                        				symbol: "calendar",
                        				url: "http://www.calendarlabs.com/templates/ical/US-Holidays.ics",
                        			},
                        		],
                        		titleReplace: {
                        			"De verjaardag van ": "",
                        			"'s birthday": ""
                        		},
                        		broadcastEvents: true,
                        		excludedEvents: []
                        	},
                        

                        Feel free to ask if there is anything you don’t quite understand… 😉

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

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