Fullcalendar custombutton icons not displaying

Question

We are using Fullcalendar V5 in an ASP.NET Core application. The calendar is working as expected.

The issue we have is getting the custom buttons to display an icon. I have searched for similar issues with Fullcalendar not displaying icons but haven't been able to resolve our issue.

The prevYear, nextYear, prev, next buttons do display their icons, it's just the custom button that don't display any icon.

We are using awesome font in our app. If I display a button with an icon outside of Fullcalendar, the icon displays fine.

For example:

<button type="button" class="btn btn-tool">
    <i class="fas fa-calendar"></i>
</button>

However, when I try the same icon for a Fullcalendar custom button, the icon will not display.

What would cause our icons not to display in fullcalendar?

Here is part of our Fullcalendar code.

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
        height: 'auto',
        aspectRatio: 2,
        contentHeight: "auto",
        handleWindowResize: true,
        expandRows: true,
        expandRows: true,
        navLinks: false
        themeSystem: 'bootstrap',
        editable: false,
        selectable: false,
        nowIndicator: true,
        dayMaxEvents: false,
        buttonText: {
            today: 'Today'
        },
        headerToolbar: {
            right: "today,datepicker,customRefresh",
            center: "title",
            left: "prevYear,prev,next,nextYear"
        },
        customButtons: {
            datepicker: {
                //text: 'Select Date',
                icon: "fas fa-calendar",            //does NOT display
                click: function (e) {
                    picker.show();
                }
            },
            customRefresh: {
                //text: 'Refresh',
                icon: 'right-single-arrow',     //does NOT display
                click: function () {
                    calendar.refetchEvents();
                }
            }
        },
        ....

Answer 1

Your code for each of your custom buttons uses the icon setting to set the icon, and your calendar is using bootstrap for the themeSystem, which indicates you're using a bootstrap 4 theme.

Now... the fullCalendar 5 documentation for customButtons gives the following among the possible options you can specify for a button:

• icon - see buttonIcons. optional
• bootstrapFontAwesome - see bootstrapFontAwesome. optional

The documentation for buttonIcons says:

when themeSystem is 'bootstrap' (Bootstrap 4), do not use this setting. Use bootstrapFontAwesome instead.

And the documentation for [bootstrapFontAwesome] says

This option only applies to calendars that have themeSystem set to 'bootstrap' (Bootstrap 4)

So in short, you're using the wrong option!

Your code should look like this:

    customButtons: {
        datepicker: {
            //text: 'Select Date',
            bootstrapFontAwesome: "fas fa-calendar",
            click: function (e) {
                picker.show();
            }
        },
        customRefresh: {
            //text: 'Refresh',
            bootstrapFontAwesome: 'fa-chevron-right',
            click: function () {
                calendar.refetchEvents();
            }
        }
    }

Demo: https://codepen.io/ADyson82/pen/poYLXPQ