• 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.9k 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.
  • H Offline
    Hriereb
    last edited by May 9, 2018, 9:37 PM

    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 Offline
      nobita
      last edited by May 10, 2018, 6:22 AM

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

      1 Reply Last reply Reply Quote 0
      • H Offline
        Hriereb
        last edited by May 10, 2018, 8:25 AM

        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 May 10, 2018, 8:27 AM Reply Quote 0
        • N Offline
          nobita @Hriereb
          last edited by May 10, 2018, 8:27 AM

          @hriereb No fr thailand

          1 Reply Last reply Reply Quote 0
          • H Offline
            Hriereb
            last edited by May 10, 2018, 8:28 AM

            Ah ok, thx again.

            1 Reply Last reply Reply Quote 0
            • H Offline
              Hriereb
              last edited by May 11, 2018, 7:20 AM

              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 May 11, 2018, 7:56 AM Reply Quote 0
              • N Offline
                nobita @Hriereb
                last edited by May 11, 2018, 7:56 AM

                @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 Offline
                  nobita @Hriereb
                  last edited by May 11, 2018, 8:05 AM

                  @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 Offline
                    Lahim
                    last edited by Jul 29, 2018, 7:50 PM

                    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.

                    J 1 Reply Last reply Jul 29, 2018, 8:17 PM Reply Quote 0
                    • J Offline
                      justjim1220 Module Developer @Lahim
                      last edited by Jul 29, 2018, 8:17 PM

                      @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… :winking_face:

                      "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 Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy