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