How to convert ExportExcel text button to ExportExcel image button

arvindg82

Hi Team,
How to convert ExportExcel text button to ExportExcel image button?

arvindg82

How to convert ExportExcel text button to ExportExcel image button?

rf1234

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

The above is not working. Image is not reflecting.

kthorngren

"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

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

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

I need the image in the screenshot.

glimpsed_chaos

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/