Font-awesome

[bicolorbore586]

Hi all,

Looking at modifying the MMM-BIRTHDAYS to display a birthday cake icon.

I’ve added symbol: ‘birthday-cake’, to the config.js file along with
getStyles: function () {
return [“font-awesome.css”];
},

but this doesn’t appear to work. I’ve tried comparing to calendar.js etc but to no avail.

Any help / guidance (in simpletons language), would be greatly appreciated.

[sdetweil]

@bicolorbore586 open the developers window, ctrl-shift-i, and select the console tab

add part of the module name to the filter field to get just those messages

u can examine the web content too. to make sure the icon name is specified correctly

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

[bicolorbore586]

@sdetweil
Hi Sam, thanks for taking the time to reply, having looked at the developer window I have the below… doesn’t appear to show any issues.

[sdetweil]

@bicolorbore586 ok, can u look at the html to make sure the icon name is specified?

see the prior link about navigating the elements content

[sdetweil]

@bicolorbore586 where is that module located… google search didn’t find it

[bicolorbore586]

@sdetweil I copied and pasted the icon logo from font-awesome cheat sheet.

The module is https://github.com/marcomerens/anniversarymodule

[sdetweil]

@bicolorbore586 ok, I added the content to the njk, and it came up
add th too

                       			<th> </th>
                       			<th>Name</th>
 
			<td><span class="fas fa-fw fa-birthday-cake"/></td>
			<td>{{p.name}}</td>
			<td>{{p.date}}</td>

[bicolorbore586]

@sdetweil Copied and pasted the code and I get the below

Questions…
Do I need to add each persons name to where it says {{p.name}}
Does it matter where in the .njk code I put the text?

[sdetweil]

@bicolorbore586 the names are in config.js , see the doc

where ? no… do u want it on the person

[bicolorbore586]

@sdetweil Yeah the config.js is all set up.
I would like it a inn the screen shot you posted where you have
Cake Icon Steve 25 Nov 50
Cake Icon Marco 30 Dec 85

Similar to the calendar, but the birthday cake instead of calendar icon.

[sdetweil]

@bicolorbore586 eh? mine shows the cake on each row

[sdetweil]

@bicolorbore586 i just pasted the sample config from the doc into the config.js no changes

has two names/rows

[sdetweil]

@bicolorbore586 I think u said u want it on the row

then it DOES matter where u put it…

it has to be on the TABLE ROW
like my code

inside the <tr>     ---- row
is a column <th>   ---- header
and data for column <td> ---  column data

[bicolorbore586]

@sdetweil so, I now have the icon in each row, but it fills the name column and shifts the name to the date, date to days and pops the days on the end… (sorry absolute noob at this, trying to move things around, but can’t for the live of me see how to change it).

{% for p in people.slice(0,limit) %}

	<tr>

{% if p.days == 0 %} {% else %} {% endif %} {% endfor %}

Name	Date	Days
	{{p.name}}	{{p.date}}	Today	{{p.days}}

[sdetweil]

@bicolorbore586 u didn’t add a column to the table header

see my code which has a new th

[bicolorbore586]

@sdetweil got ya!

I hadn’t created the column in the right place.

Thanks for your patience and guidance.