Code now looks like this:

/* Calendar: config.js set to  symbol: 'fa-light fa-calendar', */ 
.calendar .fa-calendar-day {
  color: #00d255 /* 55=Green FF=Blue */
}

/* Calendar: config.js set to  symbol: 'fa-light fa-trash-can', */ 
.calendar .fa-trash  {
  color: #C97F7F /* Brown */
}

Code now looks like this:

/* Calendar: config.js set to  symbol: 'fa-light fa-calendar', */ 
.calendar .fa-calendar-day {
  color: #00d255 /* 55=Green FF=Blue */
}

/* Calendar: config.js set to  symbol: 'fa-light fa-trash-can', */ 
.calendar .fa-trash  {
  color: #C97F7F /* Brown */
}

Not coloured (even changing solid to light), but it’s an icon :)

.calendar .fa-solid fa-calendar {
  color: #00d255 /* 55=Green FF=Blue */
}


.calendar .fa-light fa-trash-can  {
  color: #C97F7F; /* Brown */
}

The other icons used to work, pre update.
Did MM change which fa library they use?
The fa libraries ought to be backwards compatible, no?

More tomorrow, I need sleep. :sleeping_face:

I set calendar-check-o in my config and get nothing, look at the elements and see fa-calendar-check-o

but it doesn’t exist

https://fontawesome.com/icons

I appreciate your efforts but sadly this is way beyond my skills. :(

I’ll live without the icon for now and perhaps revisit another day.

oh, using on MY machine, using the default calendar config …

we omit the -o ?

note that the selector is NOT -o

I used your text in the message, not the ACTUAL class on the element… my bad…

thats why we LOOK IT UP!..

Sadly, still nothing. (Commented second one out in case it was the cause, but no luck there.)

 .calendar .fa-calendar-check-o {
  color: #00d255 /* 55=Green FF=Blue */
}

/*
.calendar .fa-trash-o  {
  color: #C97F7F; /* Brown 
}
*/ 

Also tried a known working fa icon from the weather module, but again, nothing.

.calendar .fas fa-fw fa-calendar-check-o {
color: #00d255 /* 55=Green FF=Blue*/
}

css selectors are the problem
https://www.w3schools.com/cssref/css_selectors.asp

so, your definition says

for the CLASS calendar

find ALL elements that match (.fas fa-fw fa-calendar-check)
and set their color (foreground text color style ) to …

so, lets examine the

.fas fa-fw fa-calendar-check

in the element this is ALL inside the class= attribute

class="fas fa-fw fa-calendar-check"

so to SELECT based on CLASS the names need dots in front

name = tagname (<p, <img, <table …
.name = class name ( .calendar
#name = id of element ( id=“fred” #fred

no space between selectors means ALL

Selects all elements with both name1 and name2 set within its class attribute

space between selectors means ALL AND directly child/parent

Selects all elements with name2 that is a descendant of an element with name1

and there are other types > < ~ … which mean this ??? in children elements, etc,

what your string says is
under the calendar CLASS (.calendar)
for CLASS of fas (.fas)
AND
element of fa-fw (<fa-fw)
AND
element of fa-calendar-check (<fa-calendar-check)

but you dont have the two ‘elements’ cause they are used in the class attribute

in your case you only need ONE (not all)

and its a CLASS (so leading .)

.calendar .fa-calendar-check{
....
}

But anyway, I clicked where the calendar icon ought to be, where its name shows on the cursor hover, and got this

Changed css

.calendar .fas fa-fw fa-calendar-check-o {
  color: #00d255 /* 55=Green FF=Blue*/
}

Still no icon though :-/

reload the MM page

select the elements tab
select the arrow top left of the developers page

navigate the mouse to the check icon in the calendar display
click on the icon

int he elements page is the html of the element selected
and its class name is shown

use that …

thats what I did, copied your css, didn’t work (as u said)
found the element , and its new class name
changed the css
refreshed the page and it worked.

I want YOU to do it, so next time you know how/why

.calendar .fa.fa-calendar-check-o {
  color: #00d255 /* 55=Green FF=Blue*/
}

Change it to this?

.calendar.module.calendar  .fa.fa-calendar-check-o {
  color: #00d255 /* 55=Green FF=Blue*/
}

Or?

.module.calendar  .fa.fa-calendar-check-o {
  color: #00d255 /* 55=Green FF=Blue*/
}

.calendar .fa.fa-calendar-check-o {
color: #00d255 /* 55=Green FF=Blue*/
}

yep, the class name changed

see
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1649371486164

Deleted said space, still no icons.
Appropriate code below for reference:

.calendar .fa.fa-calendar-check-o {
  color: #00d255 /* 55=Green FF=Blue*/
}

.calendar  .fa.fa-trash-o  {
  color: #C97F7F; /* Brown */
}

			module: 'calendar',
			header: 'Calendar',
			position: 'top_left',
			config: {
                    maximumEntries: 6, // Total Maximum Entries
                    maximumNumberOfDays: 365,
                    displaySymbol: true,
                    defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
                    displayRepeatingCountTitle: false,
                    defaultRepeatingCountTitle: "",
                    maxTitleLength: 30,
                    fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
                    animationSpeed: 2000,
                    fade: true,
                    showEnd: false,
                    urgency: 0,
                    timeFormat: "absolute",
                    dateFormat: "ddd Do MMMM",
                    getRelative: 0,
                    fadePoint: 0.50, // Start on 1/4th of the list.
                    hidePrivate: false,
                    calendars: [
					{
						symbol: 'calendar-check-o',
						url: 'https://calendar.google.com/calendar################
					}
				],
			}
		},
		{
			module: 'calendar',
			header: 'Binday',
			position: 'bottom_left',
			config: {
                    maximumEntries: 4, // Total Maximum Entries
                    maximumNumberOfDays: 365,
                    displaySymbol: true,
                    defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
                    displayRepeatingCountTitle: false,
                    defaultRepeatingCountTitle: "",
                    maxTitleLength: 30,
                    fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
                    animationSpeed: 2000,
                    fade: true,
                    showEnd: false,
                    urgency: 0,
                    timeFormat: "absolute",
                    dateFormat: "ddd Do MMMM",
                    getRelative: 0,
                    fadePoint: 0.50, // Start on 1/4th of the list.
                    hidePrivate: false,
                    calendars: [
                    {
						symbol: 'trash-o',
						url: 'https://calendar.google.com/calendar#######################
					}
				],
                titleReplace: {
                //	"'s birthday": "",
                //	"Recycling": "Bins",
                    "Red Bin": "Red & Black Bins",
                    "Green Bin": "Green & Black Bins" 
                },
                // Override start method.
                start: function () {
                    Log.log("Starting module: " + this.name);                   
                    for (var c in this.config.calendars) {
                        var calendar = this.config.calendars[c];
                        calendar.url = calendar.url.replace("webcal://", "http://");
                        this.addCalendar(calendar.url, calendar.user, calendar.pass);
                    }

                    this.calendarData = {};
                    this.loaded = false;
	},

symbol: 'calendar-check-o ',
symbol: 'trash-o ',

And having configured the new weather module, those icons are responding to custom css just fine.

No idea why calendar icons won’t work.

what did you define in the symbol: section in the config.js?

May these icons are outdated, you can search here for icons, only free icons will work.

Makes no difference, the icons still don’t show.

#module_3_calendar

u are using ID(#) to select

probably changed locations in the config.js

see https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1649371486123

OK, CSS. It’s only using favicon codes, not images on a URL

 #module_3_calendar .fa.fa-calendar-check-o {
  color: #00d255 /* 55=Green FF=Blue*/
}

 #module_4_calendar  .fa.fa-trash-o  {
  color: #C97F7F; /* Brown */
}

maybe see this
https://forum.magicmirror.builders/topic/16591/mmm-homeassistant-sensors-no-icons-after-mm-upgrade-to-2-19-0

electron is enforcing reported server side (CORS) restrictions is didn’t before , people protecting their content