Changing default button with Icon in Jquery DataTable is not working - css

Question

I am using JQUERY DataTable. In that I am trying to change default button text with Icon. But except copy and Print other button icon is not changing. I am using Font Awesome To change text with icon. I have added Font Awesome : CDN also But its not appearing for csv, excel, pdf Why so? Am i missing any JQUERY references
Font Awesome CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
To Change Text with Icon
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" />')
},
Complete JQuery DataTable
function LoadTableData() {
var params = {
PlantCode: $('#ddlPlant').val(), CostCenterCode: $("[id$='ddlCostCenter']").val(),
Status: $('input[name="Status"]:checked').val(), CompanyCode: $("[id$='ddlCompany']").val()
};
$.ajax({
url: 'UserService.asmx/Get_Data_Cost_Center_Master',
method: 'post',
data: JSON.stringify(params),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
$('#example').dataTable({
destroy: true,
data: data /*JSON.parse(data)*/,
columns: [
{
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{ 'data': 'Cost_Center', class: 'editable text' },
{ 'data': 'Plant', class: 'editable text' },
{ 'data': 'Status', class: 'editable text' }
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
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" />')
},
"searching": true,
"paging": true,
"info": true,
"language": {
"emptyTable": "No data available"
},
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
$("td:first", nRow).html(iDisplayIndex + 1);
return nRow;
},
})
},
error: function (err) { // Added this event to capture the failed requests.
console.log(err.responseText);
}
});
};
Screenshot's
Where i am going Wrong? Kindly help me