<![CDATA[default calendar - individual icon colors?]]>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.

]]>https://forum.magicmirror.builders/topic/277/default-calendar-individual-icon-colorsRSS for NodeTue, 08 Sep 2026 21:13:52 GMTMon, 27 Jun 2016 02:15:52 GMT60<![CDATA[Reply to default calendar - individual icon colors? on Mon, 13 Jun 2022 18:31:11 GMT]]>@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 */

]]>https://forum.magicmirror.builders/post/102268https://forum.magicmirror.builders/post/102268Mon, 13 Jun 2022 18:31:11 GMT<![CDATA[Reply to default calendar - individual icon colors? on Thu, 09 Mar 2017 03:14:12 GMT]]>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.

]]>https://forum.magicmirror.builders/post/16886https://forum.magicmirror.builders/post/16886Thu, 09 Mar 2017 03:14:12 GMT<![CDATA[Reply to default calendar - individual icon colors? on Mon, 27 Jun 2016 17:47:37 GMT]]>@KirAsh4
Thank you for the help! It looks great!

]]>https://forum.magicmirror.builders/post/2029https://forum.magicmirror.builders/post/2029Mon, 27 Jun 2016 17:47:37 GMT<![CDATA[Reply to default calendar - individual icon colors? on Mon, 27 Jun 2016 16:55:26 GMT]]>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.

]]>https://forum.magicmirror.builders/post/2019https://forum.magicmirror.builders/post/2019Mon, 27 Jun 2016 16:55:26 GMT