无法在全日历的下一个和上一个按钮中使用字形

Question

我正在尝试使用字形图标更改 fullcalendar 的下一个、上一个按钮的样式。

这是我的代码：

$(document).ready(function() {
  $('#calendar').fullCalendar({
      buttonText : {
          prev : '<i class="glyphicon glyphicon-triangle-left"></i>',
          next : '<i class="glyphicon glyphicon-triangle-right"></i>'
      }
  });
});

它不起作用。显示如下：

这是呈现的 html 代码，

我不知道出了什么问题。非常感谢您的帮助。

Answer 1

也许上一个和下一个只是预期的文本。即使有 html 个标签，它们也被视为文本。创建日历后，您是否尝试在 javascript 中添加这些图标？

喜欢：

...
$('#calendar').fullCalendar({
  buttonText : {
      prev : '<i class="glyphicon glyphicon-triangle-left"></i>',
      next : '<i class="glyphicon glyphicon-triangle-right"></i>'
  }
});
$(".fc-prev-button").append('<i class="glyphicon"...</i>')
...

Answer 2

好像设置了按钮的文字内容，而你想用自定义cssclass显示自定义图标

您尝试过使用 buttonsIcons 吗？

$('#calendar').fullCalendar({
    buttonsIcons : {
       prev: 'left-single-arrow',
       next: 'right-single-arrow',
    }
});

我不完全确定您可以使用自定义命名的 css classes，some posts 似乎暗示这并不容易。

无法在全日历的下一个和上一个按钮中使用字形

Unable to use glyphicon in next&prev buttons of fullcalendar

javascript

fullcalendar

twitter-bootstrap