html in customButtons

While creating a custom button, how do I use FontAwesome icons as button text? I have tried customButtons: { syncbtn: { text: '<i class="fa fa-glide"></i>' } }, But this shows the text as it is and doesn’t convert it to a glyph.

[MartijnWelker]

Hi @arpitgogia, questions like these should usually be posted at stackOverflow, to use Font-Awesome icons in your buttons you could do the following:

customButtons: { 
    syncbtn: { 
       icon: 'fa fa fa-glide'
    }
}

And in your CSS you should add the following:

.fc-icon-fa {
  font-family: FontAwesome;
}

It’s a bit of a hack, because FullCalendar automatically prepends the first icon class with fc-icon-.

[Phibedy]

Adding custom html to buttons would also help if you use react, because you could render the button icons as svg and don’t have to load the complete fontAwesome file 👍

Hack: Just add a custom button. Afterwards set the svg manually using js in componentDidUpdate:

document.querySelector(".fc-<customButtonName>-button").innerHTML=`<svg ....