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 7.7k 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 Do not disturb
        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

        Hello! It looks like you're interested in this conversation, but you don't have an account yet.

        Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

        With your input, this post could be even better 💗

        Register Login
        • 1
        • 2
        • 2 / 2
        • 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