3. How to change icons
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

How to change icons


  • 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.

    0
  • N

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

    0

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

    0
    N
     1 Reply
  • N

    @hriereb No fr thailand

    0

  • Ah ok, thx again.

    0

  • 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.

    0
    N
     2 Replies
  • N

    @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/

    0
  • N

    @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/

    0
  • L

    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.

    0 1 Reply
  • Module Developer

    @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… 😉

    0