FullCalendar自定义按钮图标无法显示问题技术求助

嘿，我来帮你搞定这个自定义按钮图标不显示的问题！咱们先揪出问题根源：

在FullCalendar 3.x版本里，全局的buttonsIcons配置只对官方内置按钮（比如prev、next这类自带按钮）生效，你自己定义的BackwardButton和ForwardButton属于自定义按钮，得在每个按钮的配置项里单独指定图标才行。

你原来的代码用buttonsIcons给自定义按钮设图标是找错地方啦，咱们把代码调整一下：

$('#calendar').fullCalendar({
    header: {
        left: 'BackwardButton,ForwardButton',
        center: 'title',
        right: ''
    },
    customButtons: {
        ForwardButton: {
            // text: 'Framåt',  // 要是启用text，图标会被文字覆盖，记得保持注释或删除
            icon: 'right-single-arrow', // 直接在自定义按钮里设置图标
            click: function () {
                // 这里写你的点击逻辑
            }
        },
        BackwardButton: {
            // text: 'Bakåt',
            icon: 'left-single-arrow', // 自定义按钮的图标直接在这里指定
            click: function () {
                // 这里写你的点击逻辑
            }
        }
    }
    // 删掉原来的buttonsIcons配置，它对自定义按钮不起作用
});

还有两个小细节要注意：

• 别启用自定义按钮的text属性，否则文字会优先显示，图标就被盖住了；
• 确认你已经正确引入了fullcalendar.css，图标依赖它里面的字体样式，CSS没加载好的话图标也会显示异常。

调整完之后，自定义按钮的图标应该就能正常显示啦～

内容的提问来源于stack exchange，提问作者AllramEst