Customizing the appearance of DataTable button
<p>Good day everyone.</p>

<p>I'm recently working with a web application using ASP.Net (MVC 4) and found a pretty impressive kind of HTML table which is by using Datatable.</p>

<p>I'm able to create default buttons inline with the search element of the said table but my problem is their appearance it very simple and I've been reading it's documentation but i cant find a way to change their appearance specifically their background-image.</p>

<p>Thanks in advance</p>

<p>Here is my code for the Table.</p>

<pre><code>    &lt;table id="exampledatatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" &gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Customer Code&lt;/th&gt;
                &lt;th&gt;Customer Name&lt;/th&gt;
                &lt;th&gt;Customer Type&lt;/th&gt;
                &lt;th&gt;Industry Type&lt;/th&gt;
                &lt;th&gt;Website&lt;/th&gt;
                &lt;th&gt;Email&lt;/th&gt;
                &lt;th&gt;Off Day 1&lt;/th&gt;
                &lt;th&gt;Off Day 2&lt;/th&gt;
                &lt;th&gt;E-mail&lt;/th&gt;
                &lt;th&gt;Actions&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;Tiger&lt;/td&gt;
                &lt;td&gt;Nixon&lt;/td&gt;
                &lt;td&gt;System Architect&lt;/td&gt;
                &lt;td&gt;Edinburgh&lt;/td&gt;
                &lt;td&gt;61&lt;/td&gt;
                &lt;td&gt;2011/04/25&lt;/td&gt;
                &lt;td&gt;$320,800&lt;/td&gt;
                &lt;td&gt;5421&lt;/td&gt;
                &lt;td&gt;t.nixon@datatables.net&lt;/td&gt;
                &lt;td&gt;
                    @Html.ActionLink("Edit", "UpdateCompany") |
                    @Html.ActionLink("Delete", "DeleteCompany") |
                    @Html.ActionLink("Restore", "RestoreCompany")
                &lt;/td&gt;
            &lt;/tr&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;
</code></pre>

<p>And here is my code for generating it buttons</p>

<pre><code>&lt;script&gt;

        $(document).ready(function () {
            $('#exampledatatable').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'copyHtml5',
                        text: '&lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-                                              plus-circle fa-x5"&gt;&lt;/i&gt; New&lt;/h4&gt;',
                        titleAttr: 'Create New Record'
                    },  
                    {
                        extend: 'csvHtml5',
                        text: '&lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-pencil fa-x5"&gt;&lt;/i&gt; Edit&lt;/h4&gt;',
                        titleAttr: 'Edit Existing Record'
                    },
                    {
                        extend: 'csvHtml5',
                        text: '&lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-trash fa-x5"&gt;&lt;/i&gt; Delete&lt;/h4&gt;',
                        titleAttr: 'Delete Existing Record'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '&lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-reply-all fa-x5"&gt;&lt;/i&gt; Restore&lt;/h4&gt;',
                        titleAttr: 'Restore Deleted Record'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '&lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-refresh fa-x5"&gt;&lt;/i&gt; Refresh&lt;/h4&gt;',
                        titleAttr: 'Restore Deleted Record'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '&lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-print fa-x5"&gt;&lt;/i&gt; Print&lt;/h4&gt;',
                        titleAttr: 'Restore Deleted Record'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '&lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-times-circle fa-x5"&gt;&lt;/i&gt; Close&lt;/h4&gt;',
                        titleAttr: 'Restore Deleted Record'
                    }
               ]
            });
        });
    &lt;/script&gt;
</code></pre>

<p>Here is the generated HTML code:</p>

<pre><code>&lt;div class="dt-buttons"&gt;
&lt;a class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Create New Record"&gt;
    &lt;span&gt;
        &lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-plus-circle fa-x5"&gt;&lt;/i&gt; New&lt;/h4&gt;
    &lt;/span&gt;
&lt;/a&gt;
&lt;a class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Edit Existing Record"&gt;
    &lt;span&gt;
        &lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-pencil fa-x5"&gt;&lt;/i&gt; Edit&lt;/h4&gt;
    &lt;/span&gt;
&lt;/a&gt;
&lt;a class="dt-button buttons-csv buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Delete Existing Record"&gt;
    &lt;span&gt;
        &lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-trash fa-x5"&gt;&lt;/i&gt; Delete&lt;/h4&gt;
    &lt;/span&gt;
&lt;/a&gt;
&lt;a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record"&gt;
    &lt;span&gt;
        &lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-reply-all fa-x5"&gt;&lt;/i&gt; Restore&lt;/h4&gt;
    &lt;/span&gt;
&lt;/a&gt;
&lt;a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record"&gt;
    &lt;span&gt;
        &lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-refresh fa-x5"&gt;&lt;/i&gt; Refresh&lt;/h4&gt;
    &lt;/span&gt;
&lt;/a&gt;
&lt;a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record"&gt;
    &lt;span&gt;
        &lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-print fa-x5"&gt;&lt;/i&gt; Print&lt;/h4&gt;
    &lt;/span&gt;
&lt;/a&gt;
&lt;a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="exampledatatable" href="#" title="Restore Deleted Record"&gt;
    &lt;span&gt;
        &lt;h4 style="font-size: 13px;"&gt;&lt;i class="fa fa-times-circle fa-x5"&gt;&lt;/i&gt; Close&lt;/h4&gt;
    &lt;/span&gt;
&lt;/a&gt;
</code></pre>

<p></p>