Calendar and Font Awesome - no icons

[BKeyport]

Course we could get around this hassle if Electron would just support full emojis. 🤣🤣🤣🤣

[sdetweil]

@RGN01 i just installed a new instance of MM, and used your settings for symbol, color and symbolClassName. and they all worked.

I only used this classname

symbolClassName: “fas fa-”, the other works too “fas fa-fw fa-”

[RGN01]

@BKeyport Thank you - perhaps that is my path of least resistance - reinstall MM.

I’ll give that a go on the weekend, if I don’t figure this out before.

[sdetweil]

@RGN01 what version are you running?
see the startup messages or the top of package.json

[RGN01]

@sdetweil thanks for your reply.

	"name": "magicmirror",
	"version": "2.23.0",

[sdetweil]

@RGN01 so reinstalling won’t help … as u have the latest

how did u install?? manual??

do this , reinstall the fonts

cd ~/MagicMirror/fonts
rm -rf node_modules
rm package-lock.json
npm install 

then try MM again

[RGN01]

@sdetweil Thank you. I have done the font reinstall and rebooted. Still the same, unfortunately.

When you said “then try MM again” did you mean reinstall or just see if it works?

[sdetweil]

@RGN01 just see if it works

[RGN01]

@sdetweil Thanks for clarifying. Unfortunately, no, it did not.

[sdetweil]

@RGN01 ok, lets open the developers window (ctrl-shift-i on the MM keyboard) , select the elements tab , select the pointer top left and use the mouse to position over the icon in the 1st element
see where its looking

[RGN01]

@sdetweil Thank you so much for your assistance - I really do appreciate it!

        {keyword: 'Recycling', symbol: 'fas fa-house', color: 'Red'},
        {keyword: 'Rubbish', symbol: 'fas fa-person', color: 'Gold'}
		],
        calendars: [
          {
            url: 'https://calendar.google.com//Calendar1Redacted/basic.ics',
            symbol: 'fa-house',
          },

It is matching to the ‘Rubbish’ keyword.

[sdetweil]

@RGN01 said in Calendar and Font Awesome - no icons:

 {keyword: 'Recycling', symbol: 'fas fa-house', color: 'Red'},
    {keyword: 'Rubbish', symbol: 'fas fa-person', color: 'Gold'}

there is the problem…

u need to split the class and the symbol

                symbol: 'person',
                symbolClassName: "fas fa-fw fa-",

the system appends the symbol name TO the classname

here is the default value
defaultSymbolClassName: “fas fa-fw fa-”,

so, if it doesn’t need to be different (paid for icons use a different prefix)
then don’t set it…

and U can set the prefix (classname) once per calendar in the list of calendars
symbolClassName: “fas fa-fw fa-”,

NOT on every symbol entry

[RGN01]

@sdetweil Thank you. You have helped a lot but I’m still battling. I’ve had a long day and am struggling to concentrate so will resume this tomorrow.

[sdetweil]

@RGN01

this

symbol: 'fas fa-house'

should be this

symbol: 'house'

[RGN01]

@sdetweil Thanks again. I went back to basics and removed all ‘my’ entries from config.js and replaced them with the config from the reference page, slightly edited. This is what I now have:

    {
    module: "calendar",
    position: "bottom_left", 
    config: {
	   coloredText: false,
	   coloredBorder: false,
	   coloredSymbol: false,
	   coloredBackground: false,
	   calendars: [
		   {
			  url: 'https://calendar.google.com/calendar/ical/Calendar1Redacted/basic.ics',
			  symbol: 'calendar',
 	       },
	],
	}
	},

Which delivers:

Looking at the developers window, I see:

and

[sdetweil]

@RGN01 I reviewed on my system, used the same symbol

same content… mine shows the icon

edit: one question… do you have any font definitions in your custom.css?

SO, this tells me the fonts didn’t get installed, so do
edit… note I am adding on the vendor folder … as that is where the fontawesome css comes from

cd ~/MagicMirror/fonts
rm -rf node_modules
rm package-lock.json
npm install 
cd ../vendor
rm -rf node_modules
rm package-lock.json
ls
npm install 

then check the folder contents this is what mine looks like

(base) sam@sams:~/MagicMirror/fonts$ ls
node_modules  package.json  package-lock.json  roboto.css
(base) sam@sams:~/MagicMirror/fonts$ ls node_modules/
@fontsource
(base) sam@sams:~/MagicMirror/fonts$ ls node_modules/@fontsource/
roboto  roboto-condensed
(base) sam@sams:~/MagicMirror/fonts$ 

my MagicMirror/vendor folder looks like this

(base) sam@sams:~/MagicMirror/vendor$ ls
css  node_modules  package.json  package-lock.json  vendor.js
(base) sam@sams:~/MagicMirror/vendor$ ls css
font-awesome.css
(base) sam@sams:~/MagicMirror/vendor$ 

and my calendar config

		{
			module: "calendar",
			header: "US Holidays",
			position: "top_left",
			config: {
				coloredSymbol:true,
				calendars: [
					{

					symbol: 'calendar',
					color: 'pink',
						url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
						name:"holidays"
					}
				]
			}
		}

the top of the MM web page shows the includes for font and css
this is what the default looks like