title: Customizing the appearance of DataTable button
body: <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>