Answers

• arvindg82 Posts: 16Questions: 4Answers: 0

  September 2023

  How to convert ExportExcel text button to ExportExcel image button?
• rf1234 Posts: 2,932Questions: 87Answers: 415

  September 2023 edited September 2023

  I am not sure whether I understand what you mean. If you mean to have an icon as the Excel download button instead of the "Excel" text then I should have what you need.

  My Excel Button looks like this:
  

  You'll find the respective German language button settings in here including the Excel Button that I made using font awesome

  $.extend( true, $.fn.dataTable.defaults, {
      "language": {
          //only works for built-in buttons, not for custom buttons
          "buttons": {
              "create": "Neu",
              "edit": "Ändern",
              "remove": "Löschen",
              "copy": "Kopieren",
              "csv": "CSV-Datei",
              "excel": '<span class="fa fa-file-excel-o"></span>',
              "pdf": "PDF-Dokument",
              "print": "Drucken",
              "colvis": "Spalten Auswahl",
              "collection": "Auswahl",
              "upload": "Datei auswählen....",
              "selectNone": "Auswahl aufheben"
          }
      }            
  } );        
  
• arvindg82 Posts: 16Questions: 4Answers: 0

  September 2023

  The above is not working. Image is not reflecting.
• kthorngren Posts: 21,129Questions: 26Answers: 4,916

  September 2023 edited September 2023

  "excel": '<span class="fa fa-file-excel-o"></span>'

  This uses the Font Awesome library for the icons. Did you load the library?

  If not you can get it from here:
  https://cdnjs.com/libraries/font-awesome

  Kevin
• rf1234 Posts: 2,932Questions: 87Answers: 415

  September 2023 edited September 2023

  I am actually using an older version of font awesome. I guess the syntax has changed in the later versions. Much more difficult to figure it out with those newer versions.

  This is what I am using:
  https://fontawesome.com/v4/icons/

  And here is the link to the respective css:

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  

  Just checked: If you are using font awesome 5 or 6 the spreadsheet icons are no longer free ...
• rf1234 Posts: 2,932Questions: 87Answers: 415

  September 2023 edited September 2023

  For custom buttons it is easy to use those icons - also in combination with text.

  Here is a custom button called "editCashFlow":

  $.fn.dataTable.ext.buttons.editCashFlow = {
      extend: 'edit',
      text: '<span class="fa fa-edit">&nbsp;&nbsp;</span>Zahlung'
  };
  

  Result is this:
  
• arvindg82 Posts: 16Questions: 4Answers: 0

  September 2023 edited September 2023

  

  I need the image in the screenshot.
• glimpsed_chaos Posts: 138Questions: 29Answers: 4

  September 2023

  Here is an example with both FA 4.7 Excel icon and an Excel Image in a button. The image is oversized and you would need to find a proper one of course.

  Hopefully that helps.

  https://live.datatables.net/xawaxado/1/