Replace jQuery DataTable Buttons with Icons using jQuery in ASP.Net

Hi Nikhil2393,

Each button has a unique class .buttons-excel, .buttons-pdf etc.

So you can easily apply inner content of button using Font Awesome.

Do this in the initComplete() event.

Check this example. Now please take its reference and correct your code.

HTML

<asp:GridView ID="gvCustomers" runat="server" CssClass="table table-striped table-bordered table-hover"
    AllowPaging="false" AutoGenerateColumns="false" ClientIDMode="Static" PageSize="4">
    <Columns>
        <asp:TemplateField HeaderText="Id">
            <ItemTemplate>
                <asp:Label runat="server" Text='<%# Eval("Id")%>'>
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label runat="server" Text='<%# Eval("Name")%>'>
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Country">
            <ItemTemplate>
                <asp:Label runat="server" Text='<%# Eval("Country")%>'>
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
            initComplete: function () {
                $('.buttons-copy').html('<i class="fa fa-copy" />');
                $('.buttons-csv').html('<i class="fa fa-file-text-o" />');
                $('.buttons-excel').html('<i class="fa fa-file-excel-o" />');
                $('.buttons-pdf').html('<i class="fa fa-file-pdf-o" />');
                $('.buttons-print').html('<i class="fa fa-print" />');
            },
            dom: 'Bfrtip',
            'aoColumnDefs': [{ 'bSortable': true, 'aTargets': [0]}],
            'iDisplayLength': 2,
            buttons: [
            { extend: 'print', text: 'Print', exportOptions: { columns: ':visible'} },
            { extend: 'copy', text: 'Copy to clipboard', exportOptions: { modifier: { page: 'all'}} },
            { extend: 'excel', text: 'Export to Excel', filename: 'Customers', exportOptions: { modifier: { page: 'all'}} },
            { extend: 'csv', text: 'Export to CSV', filename: 'Customers', exportOptions: { modifier: { page: 'all'}} },
            { extend: 'pdf', text: 'Export to PDF', filename: 'Customers', orientation: 'Portrait', pageSize: 'LEGAL', exportOptions: { modifier: { page: 'all' }, columns: [0, 1, 2]} }
            ]
        });
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            System.Data.DataTable dt = new System.Data.DataTable();
            dt.Columns.AddRange(new System.Data.DataColumn[] { 
                        new System.Data.DataColumn("Id", typeof(int)),
                        new System.Data.DataColumn("Name",typeof(string)),
                        new System.Data.DataColumn("Country",typeof(string))});
            dt.Rows.Add(1, "John Hammond", "United States");
            dt.Rows.Add(2, "Mudassar Khan", "India");
            dt.Rows.Add(3, "Suzanne Mathews", "France");
            dt.Rows.Add(4, "Robert Schidner", "Russia");
            gvCustomers.DataSource = dt;
            gvCustomers.DataBind();
        }
    }

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handels Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {New System.Data.DataColumn("Id", GetType(Integer)), New System.Data.DataColumn("Name", GetType(String)), New System.Data.DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        gvCustomers.DataSource = dt
        gvCustomers.DataBind()
    End If
End Sub

Screenshot