dataTables add Font Awesome icon instead of column name - datatables

Question

I'm new in DataTables and I have a simple datatable for which I'm trying to add a Font Awesome fa-info-circle image instead of one column header by using render like:
table = $("#datatable-buttons").DataTable({
data: document.pvm.tableContent(),
columns: [
{ data: "Info", render: function (data, type, full, meta) { if (type === 'display') return '<span style="font-size:75%" class="fa fa-info-circle"></span>' } },
{ data: "WiFi", title: "WiFi" },
{ data: "GPS", title: "GPS" },
],
fixedHeader: true,
dom: "lfBrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "excel",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "pdfHtml5",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "print",
className: "btn-sm"
},
],
});
But it seems that my icon instead of being just in the header for Info column, there is no icon in the header but in the data columns instead of the correct data. Is is possible to add a icon just for one field in the header?

Answer 1

I believe when you are saying "column header" you mean the title? render() is for rendering column data, you set the column header through the title property :
var table = $('#example').DataTable({
columnDefs: [{
targets: 0,
data: '0', //just use DOM
title: '<i class="fa fa-info-circle fa-lg"></i>'
}]
})
demo -> http://jsfiddle.net/6kp3tvpb/
title can be a function as well :
title: function() {
return '<i class="fa fa-info-circle fa-lg"></i>'
}
But notice that this callback only is called once.