I now have coloured icons in the calendar:

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:

class? element? I try, but I’m not much of a coder. I’m hopelessly lost, as I’m sure you can tell.

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.

Even though the icon is fa-calendar-check-o
https://fontawesome.com/v4/icon/calendar-check-o

we omit the -o ?

Goodness, that’s complicated! Well, it kinda makes sense but, I’ll read it again when not so tired.

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.

I guess ‘elements’ is from another browser type, I’m in Firefox where it’s called Inspector.

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

Bit familiar with the F12 console, but it’s not easy to select the exact spot.

.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*/
}

This worked perfectly prior to the most recent update.

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;
	},

I have these, both of which were working perfectly well prior to this update

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.

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

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

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