javascript - Unable to use glyphicon in next&prev buttons of fullcalendar - Stack Overflow

admin管理员组

文章数量:1389534

I'm trying to change a style of next, previous buttons of fullcalendar by using a glyphicon.

Here is my code:

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

It's not working. It's shown like this:

And here is a rendered html code,

I didn't know what was wrong. Thanks a lot for your help.

I'm trying to change a style of next, previous buttons of fullcalendar by using a glyphicon.

Here is my code:

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

It's not working. It's shown like this:

And here is a rendered html code,

I didn't know what was wrong. Thanks a lot for your help.

• javascript
• twitter-bootstrap
• fullcalendar

Share Improve this question Follow edited Jul 2, 2015 at 9:47 uraimo 19.9k88 gold badges5050 silver badges5757 bronze badges asked Jul 2, 2015 at 9:43 Hikaru ShindoHikaru Shindo 2,92399 gold badges4040 silver badges7070 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Maybe prev and next are only expected text. And even if there are html tags, they are considered as text. Did you tried to add these icon in javascript after the creation of the calendar?

Like:

...
$('#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>')
...

That seems to set the text content of the button, while you want to use a custom css class to display a custom icon.

Have you tried using buttonsIcons instead?

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

I'm not pletely sure that you can use custom named css classes, some posts seem to hint to the fact that it could not be that easy.

本文标签： javascriptUnable to use glyphicon in nextampprev buttons of fullcalendarStack Overflow