Using Font Awesome icon in JQuery datatable button

user87sM 0
Viewed 32

Hi i am using DataTable with jquery and I am adding a refresh button. However, when I try to add the Font Awesome sync button to the button, it just displays a blank button.

.DataTable({
        dom: "Blfrtip",
        processing: true,
        serverSide: true,
        responsive: true,
        pageLength: 25,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search...",
          emptyTable: "No results found.",
          lengthMenu: "Show Results _MENU_",
          paginate: {
            previous: "Previous",
          },
        },
        buttons: [
          {
            text: '<i class="fas fa-sync"></i>',
            action: function (e, dt, node, config) {
              dt.ajax.reload();
            },
          },
        ],


<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"></script>

Update

I was able to find a way around this by adding this style:

<style media="all" type="text/css">
  .fa-sync::before { 
    content: "\f021";
    font-size: large;
    display: flex;
    align-items: center;
    padding-top: 0.2rem;
  }
</style>

I believe the issue is due to the style being in a ::before selector:

.fa-sync::before {
  content: "\f021"; 
}
datatable button jquery css
1 Answers

fas fa-sync is an icon of font awesome version 5.15.4, as you can see here. It isn't part of the version 6 collection.

Since you are using 6.2.0 in your script src, you either need to look for an icon, which is included in version 6, like rotate.

Or you need to change the version of the URL, which you use in your script src, to version 5.

Geshode0
Related