• 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 4.0k 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.
  • 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
                      18/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