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.6k 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

      @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 Reply Quote 0
      • S Offline
        sdetweil @RGN01
        last edited by sdetweil

        @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
        • 3 / 3
        • First post
          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