• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Font-awesome

Scheduled Pinned Locked Moved Solved Troubleshooting
16 Posts 2 Posters 2.1k Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    bicolorbore586
    last edited by Oct 6, 2022, 1:38 PM

    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.

    S 1 Reply Last reply Oct 6, 2022, 2:02 PM Reply Quote 0
    • S Offline
      sdetweil @bicolorbore586
      last edited by sdetweil Oct 6, 2022, 2:03 PM Oct 6, 2022, 2:02 PM

      @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

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      B 1 Reply Last reply Oct 6, 2022, 2:18 PM Reply Quote 0
      • B Offline
        bicolorbore586 @sdetweil
        last edited by Oct 6, 2022, 2:18 PM

        @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.
        195e114a-6ade-484b-b035-7daee37e9227-image.png

        S 2 Replies Last reply Oct 6, 2022, 2:30 PM Reply Quote 0
        • S Offline
          sdetweil @bicolorbore586
          last edited by sdetweil Oct 6, 2022, 2:31 PM Oct 6, 2022, 2:30 PM

          @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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @bicolorbore586
            last edited by Oct 6, 2022, 2:33 PM

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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            B 1 Reply Last reply Oct 6, 2022, 2:40 PM Reply Quote 0
            • B Offline
              bicolorbore586 @sdetweil
              last edited by Oct 6, 2022, 2:40 PM

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

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

              S 1 Reply Last reply Oct 6, 2022, 2:51 PM Reply Quote 0
              • S Offline
                sdetweil @bicolorbore586
                last edited by sdetweil Oct 6, 2022, 2:53 PM Oct 6, 2022, 2:51 PM

                @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>
                

                Screenshot_2022-10-06_09-53-22.png

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                B 1 Reply Last reply Oct 6, 2022, 3:03 PM Reply Quote 0
                • B Offline
                  bicolorbore586 @sdetweil
                  last edited by Oct 6, 2022, 3:03 PM

                  @sdetweil Copied and pasted the code and I get the below 29368d2e-22bc-4a73-9588-cf7df46f6846-image.png

                  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?

                  S 1 Reply Last reply Oct 6, 2022, 3:07 PM Reply Quote 0
                  • S Offline
                    sdetweil @bicolorbore586
                    last edited by sdetweil Oct 6, 2022, 3:08 PM Oct 6, 2022, 3:07 PM

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

                    where ? no… do u want it on the person

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    B 1 Reply Last reply Oct 6, 2022, 3:12 PM Reply Quote 0
                    • B Offline
                      bicolorbore586 @sdetweil
                      last edited by Oct 6, 2022, 3:12 PM

                      @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.

                      S 3 Replies Last reply Oct 6, 2022, 3:15 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        7/16
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy