How to use DataTables font awesome icons?

Issue

I am using DataTables and instead of using images for the pagination buttons I decided to use icons. I used the Bootstrap Font awesome CDN which works perfectly fine but in a proxy server, for some reason, the file throws 404 but the DataTables CDN loads properly. From the DataTables documentation I found that DataTables has its own font-awesome meaning embedded one which is as follows:

Here is the fiddle [JSFiddle][1]

cdn.datatables.net/plug-ins/1.10.15/integration/font-awesome/dataTables.fontAwesome.css

Bootstrap CDN has the fa-forward etc classes for the fonts but in the DataTables CDN I couldn't find any so how can I add the icons for the pagination.

JQuery

var table = $('#example').DataTable({
 pagingType: 'input',
 pageLength: 5,
 language: {
 oPaginate: {
   sNext: '<i class="fa fa-forward"></i>',
   sPrevious: '<i class="fa fa-backward"></i>',
   sFirst: '<i class="fa fa-step-backward"></i>',
   sLast: '<i class="fa fa-step-forward"></i>'
   }
   }   
  })  

Using DataTables font awesome how can I add the classes in my Jquery?

Solution

Try with this code

Hope this will helps You.

Edit

Here you can use full_numbers instead of input else it will throw error like

Cannot read property 'fnInit' of undefined.

And in your given font-awesome library there is a no such fonts which you want to use. So use other instead.

$('#example').DataTable({
    
     language: {
      oPaginate: {
          sNext: '<i class="fa fa-forward"></i>',
          sPrevious: '<i class="fa fa-backward"></i>',
          sFirst: '<i class="fa fa-step-backward"></i>',
          sLast: '<i class="fa fa-step-forward"></i>' 
      }
      
   } ,
   pagingType: 'full_numbers',
   pageLength: 5
});

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table id="example">
<thead>
        <tr>
            <th>Subscriber ID</th>
            <th>Install Location</th>
            <th>Subscriber Name</th>
            <th>some data</th>
        </tr>
    </thead>
</table>

In Your given CDN

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute;
    top: 12px;
    right: 8px;
    display: block;
    font-family: FontAwesome;
}

Here you see that your cdn inherits the fontawesome font family

So if you can't use direct fontawesome CDN than download it locally and upload on your server it will helps you.

Answered By - Nirav Joshi