default calendar - individual icon colors?

[Shockwave]

I’m loading 2 calendars, one with the US Holidays and another with friend’s birthdays and anniversaries. I’ve figured out how to change the color of all of the icons which adds a nice bit of color, but I was wondering if it was possible to change the color of the birthday cake icon independently of the calendar-check-o icon.

[KirAsh4]

Each symbol is wrapped in CSS span tags allowing you to set your own styles to them. If you look at the actual HTML, you’ll see something similar to this:

<tr class="normal">
  <td class="symbol"><span class="fa fa-birthday-cake">...</span></td>
  <td class="title bright">Stacey Donaldson</td>
  <td class="time light">Today</td>
</tr>
<tr class="normal">
  <td class="symbol"><span class="fa fa-calendar"></span></td>
  <td class="title bright">AJ Visit</td>
  <td class="time light">Jul 3rd</td>
</tr>
<tr class="normal">
  <td class="symbol"><span class="fa fa-calendar-check-o "></span>
  </td><td class="title bright">Independence Day</td>
  <td class="time light">Jul 4th</td>
</tr>

Of interest is the line that specifies the symbol class. Look at the actual symbol being used. Notice how each one is slightly different:

<span class="fa fa-birthday-cake">...</span>
<span class="fa fa-calendar">...</span>
<span class="fa fa-calendar-check-o ">...</span>

Incidentally, those correspond to the symbols I specified in my config file. You can manipulate those. In ~MagicMirror/css/custom.css add the following:

.fa.fa-calendar {
  color: #ffff00; /* Yellow */
}
.fa.fa-birthday-cake {
  color: #ff0000; /* Red */
}
.fa.fa-calendar-check-o {
  color: #ff00ff; /* Magenta */
}

Reload.

[Shockwave]

@KirAsh4
Thank you for the help! It looks great!

[pugsly]

I had this working, and now the icons are just gray, and no matter what I set them to it doesn’t change. I am not sure what would have changed.

[pugsly]

@pugsly Figured it out…

.fas.fa-fw.fa-calendar {
color: #ffffff; /* white /
}
.fas.fa-fw.fa-birthday-cake {
color: #00ffff; / cyan /
}
.fas.fa-fw.fa-gift {
color: #ffff00; / Yellow /
}
.fas.fa-fw.fa-institution {
color: #ff0000; / Red /
}
.fas.fa-fw.fa.fa-building-o {
color: #00ff00; / Lime */