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

v2.22.0 & Font Awesome FAB icons

Scheduled Pinned Locked Moved Solved Troubleshooting
3 Posts 2 Posters 1.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.
  • L Offline
    luisestrada
    last edited by Jan 2, 2023, 12:14 AM

    Hello,

    Usually, every time there’s an update I have to edit calendar.js to get the FAB icons from FontAwesome working.

    I noticed this updates is supposed to do the job for me but it seems there’s no tutorial or explanation of how to use it. This is what the update mentions.

    Possibility to change FontAwesome class in calendar, so icons like fab fa-facebook-square works.
    

    However in the documentation this is the only information available.

    defaultSymbol	The default symbol.
    
    Possible values: See Font Awesome website.
    Default value: calendar
    

    I am using one FAS icon for the calendar and another FAB icon for Canadian holidays, but I can’t make it work both at the same time without manipulating the file.

    Please let me know how to set it up, (I believe in config.js), to make it work.

    S 1 Reply Last reply Jan 2, 2023, 12:23 AM Reply Quote 1
    • S Away
      sdetweil @luisestrada
      last edited by sdetweil Jan 2, 2023, 12:25 AM Jan 2, 2023, 12:23 AM

      @luisestrada a new config option lets you change the prefix instead of having it hard coded

      defaultSymbolClassName: "fas fa-fw fa-",
      

      and u can set it for each calendar config

           url: 
           defaultSymbolClassName: "fas fa-fw fa-",
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      L 1 Reply Last reply Jan 2, 2023, 4:46 AM Reply Quote 1
      • L Offline
        luisestrada @sdetweil
        last edited by Jan 2, 2023, 4:46 AM

        @sdetweil Fantastic, thank you so much. It worked!

        This is the code I have (in case someone needs it):

                {
        			module: "calendar",
        			header: "Canadian Holidays (QC),
        			position: "top_left",
        			config: {
        				calendars: [
        					{
        						url: "https://www.officeholidays.com/ics-clean/canada/quebec",
        						symbol: "canadian-maple-leaf",
        						color: 'crimson'
                            },
        				],
        				defaultSymbolClassName: "fab fa-",
        				colored: true,
        				coloredSymbolOnly: true,
        				maximumEntries: "2",
        				wrapEvents: true,
        			}
        		},
        

        And happy new year!!!

        1 Reply Last reply Reply Quote 1
        • S sdetweil referenced this topic on Jan 2, 2023, 12:30 PM
        • 1 / 1
        1 / 1
        • First post
          1/3
          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