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

Calendar and Font Awesome - no icons

Scheduled Pinned Locked Moved Unsolved Troubleshooting
22 Posts 4 Posters 5.3k Views 4 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.
  • R Offline
    RGN01 @sdetweil
    last edited by Jun 8, 2023, 7:40 PM

    @sdetweil Thank you. I have done the font reinstall and rebooted. Still the same, unfortunately.

    When you said “then try MM again” did you mean reinstall or just see if it works?

    S 1 Reply Last reply Jun 8, 2023, 7:44 PM Reply Quote 0
    • S Offline
      sdetweil @RGN01
      last edited by Jun 8, 2023, 7:44 PM

      @RGN01 just see if it works

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • R Offline
        RGN01 @sdetweil
        last edited by Jun 8, 2023, 7:46 PM

        @sdetweil Thanks for clarifying. Unfortunately, no, it did not.

        cal.png

        S 1 Reply Last reply Jun 8, 2023, 7:56 PM Reply Quote 0
        • S Offline
          sdetweil @RGN01
          last edited by sdetweil Jun 8, 2023, 8:01 PM Jun 8, 2023, 7:56 PM

          @RGN01 ok, lets open the developers window (ctrl-shift-i on the MM keyboard) , select the elements tab , select the pointer top left and use the mouse to position over the icon in the 1st element
          see where its looking
          Screenshot at 2023-06-08 15-01-28.png

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          R 1 Reply Last reply Jun 8, 2023, 8:22 PM Reply Quote 0
          • R Offline
            RGN01 @sdetweil
            last edited by Jun 8, 2023, 8:22 PM

            @sdetweil Thank you so much for your assistance - I really do appreciate it!

                    {keyword: 'Recycling', symbol: 'fas fa-house', color: 'Red'},
                    {keyword: 'Rubbish', symbol: 'fas fa-person', color: 'Gold'}
            		],
                    calendars: [
                      {
                        url: 'https://calendar.google.com//Calendar1Redacted/basic.ics',
                        symbol: 'fa-house',
                      },
            
            

            It is matching to the ‘Rubbish’ keyword.

            Cal1.png

            Cal2.png

            S 1 Reply Last reply Jun 8, 2023, 8:30 PM Reply Quote 0
            • S Offline
              sdetweil @RGN01
              last edited by sdetweil Jun 8, 2023, 8:33 PM Jun 8, 2023, 8:30 PM

              @RGN01 said in Calendar and Font Awesome - no icons:

               {keyword: 'Recycling', symbol: 'fas fa-house', color: 'Red'},
                  {keyword: 'Rubbish', symbol: 'fas fa-person', color: 'Gold'}
              

              there is the problem…

              u need to split the class and the symbol

                              symbol: 'person',
                              symbolClassName: "fas fa-fw fa-",
              

              the system appends the symbol name TO the classname

              here is the default value
              defaultSymbolClassName: “fas fa-fw fa-”,

              so, if it doesn’t need to be different (paid for icons use a different prefix)
              then don’t set it…

              and U can set the prefix (classname) once per calendar in the list of calendars
              symbolClassName: “fas fa-fw fa-”,

              NOT on every symbol entry

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              R 1 Reply Last reply Jun 8, 2023, 8:52 PM Reply Quote 0
              • R Offline
                RGN01 @sdetweil
                last edited by Jun 8, 2023, 8:52 PM

                @sdetweil Thank you. You have helped a lot but I’m still battling. I’ve had a long day and am struggling to concentrate so will resume this tomorrow.

                S 1 Reply Last reply Jun 8, 2023, 8:54 PM Reply Quote 0
                • S Offline
                  sdetweil @RGN01
                  last edited by Jun 8, 2023, 8:54 PM

                  @RGN01

                  this

                  symbol: 'fas fa-house'
                  

                  should be this

                  symbol: 'house'
                  

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  R 1 Reply Last reply Jun 10, 2023, 4:42 AM Reply Quote 0
                  • R Offline
                    RGN01 @sdetweil
                    last edited by Jun 10, 2023, 4:42 AM

                    @sdetweil Thanks again. I went back to basics and removed all ‘my’ entries from config.js and replaced them with the config from the reference page, slightly edited. This is what I now have:

                        {
                        module: "calendar",
                        position: "bottom_left", 
                        config: {
                    	   coloredText: false,
                    	   coloredBorder: false,
                    	   coloredSymbol: false,
                    	   coloredBackground: false,
                    	   calendars: [
                    		   {
                    			  url: 'https://calendar.google.com/calendar/ical/Calendar1Redacted/basic.ics',
                    			  symbol: 'calendar',
                     	       },
                    	],
                    	}
                    	},
                    
                    

                    Which delivers: Cal3.png

                    Looking at the developers window, I see: Cal4.png

                    and Cal5.png

                    S 1 Reply Last reply Jun 14, 2023, 12:34 PM Reply Quote 0
                    • S Offline
                      sdetweil @RGN01
                      last edited by sdetweil Jun 14, 2023, 12:55 PM Jun 14, 2023, 12:34 PM

                      @RGN01 I reviewed on my system, used the same symbol
                      Screenshot at 2023-06-14 07-29-15.png

                      same content… mine shows the icon

                      edit: one question… do you have any font definitions in your custom.css?

                      SO, this tells me the fonts didn’t get installed, so do
                      edit… note I am adding on the vendor folder … as that is where the fontawesome css comes from

                      cd ~/MagicMirror/fonts
                      rm -rf node_modules
                      rm package-lock.json
                      npm install 
                      cd ../vendor
                      rm -rf node_modules
                      rm package-lock.json
                      ls
                      npm install 
                      
                      

                      then check the folder contents this is what mine looks like

                      (base) sam@sams:~/MagicMirror/fonts$ ls
                      node_modules  package.json  package-lock.json  roboto.css
                      (base) sam@sams:~/MagicMirror/fonts$ ls node_modules/
                      @fontsource
                      (base) sam@sams:~/MagicMirror/fonts$ ls node_modules/@fontsource/
                      roboto  roboto-condensed
                      (base) sam@sams:~/MagicMirror/fonts$ 
                      

                      my MagicMirror/vendor folder looks like this

                      (base) sam@sams:~/MagicMirror/vendor$ ls
                      css  node_modules  package.json  package-lock.json  vendor.js
                      (base) sam@sams:~/MagicMirror/vendor$ ls css
                      font-awesome.css
                      (base) sam@sams:~/MagicMirror/vendor$ 
                      

                      and my calendar config

                      		{
                      			module: "calendar",
                      			header: "US Holidays",
                      			position: "top_left",
                      			config: {
                      				coloredSymbol:true,
                      				calendars: [
                      					{
                      
                      					symbol: 'calendar',
                      					color: 'pink',
                      						url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics",
                      						name:"holidays"
                      					}
                      				]
                      			}
                      		}
                      

                      the top of the MM web page shows the includes for font and css
                      this is what the default looks like

                      Screenshot at 2023-06-14 07-50-43.png

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 2 / 3
                      2 / 3
                      • First post
                        17/22
                        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