JQuery DataTable替换默认按钮为Font Awesome图标时csv等按钮不生效

• 核心原因1：图标类名不匹配。你使用的fa-file-text-o/fa-file-excel-o/fa-file-pdf-o是Font Awesome 4的旧版类名，对应FA5的常规（Regular）类图标，但你仅引入了FA5核心CSS，未引入FA5配套的v4兼容样式，导致这三个类名无对应样式、图标无法渲染。而fa-copy/fa-print属于FA5核心直接支持的类名，所以能正常显示。
• 次要原因：手动替换按钮内容的逻辑可靠性不足。你在initComplete回调中通过选择器替换按钮HTML的方式，依赖按钮渲染完成的时机，一旦导出按钮（csv/excel/pdf）存在延迟渲染、DOM结构差异，就会出现替换失败、原有文本残留的问题。

方案1：直接修正图标类名（推荐） #

把旧的FA4类名替换为FA5的标准类名，同时调整按钮初始化配置，直接在按钮定义中设置图标文本，无需手动在initComplete中替换：
修改后完整的DataTable初始化配置核心片段：

$('#example').dataTable({
    destroy: true,
    data: 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: [
        { extend: 'copy', text: '<i class="fa fa-copy"></i>' },
        { extend: 'csv', text: '<i class="fa-solid fa-file-csv"></i>' },
        { extend: 'excel', text: '<i class="fa-solid fa-file-excel"></i>' },
        { extend: 'pdf', text: '<i class="fa-solid fa-file-pdf"></i>' },
        { extend: 'print', text: '<i class="fa fa-print"></i>' }
    ],
    "searching": true,
    "paging": true,
    "info": true,
    "language": {
        "emptyTable": "No data available"
    },
    "fnRowCallback": function (nRow, aData, iDisplayIndex) {
        $("td:first", nRow).html(iDisplayIndex + 1);
        return nRow;
    },
})

• 如果需要用原来的空心（outline）风格图标，可以把对应类名换成fa-regular前缀的版本：
  • csv对应：<i class="fa-regular fa-file-lines"></i>
  • excel对应：<i class="fa-regular fa-file-excel"></i>
  • pdf对应：<i class="fa-regular fa-file-pdf"></i>

方案2：兼容旧类名（不想调整代码的话用） #

引入Font Awesome 5配套的v4兼容样式文件，无需修改原有类名和替换逻辑，但会额外增加少量资源加载。

内容的提问来源于stack exchange，提问作者ak74