Print fontawesome with datatables

Question

I have the following table that inside tfoot I put a fontawesome. I leave the example:

$(function () { 
  $('.cons-assid').on("click", function() {
    $("#consultassid tbody").empty();
      var linha = ``; 

        $('.consultassid > tbody > tr').remove();
        
        linha += `<tr">
                      <td class="text-center text-muted"> Teste</td>
                      <td class="text-center text-muted"> Teste1</td>
                    </tr>`;
                    
      $("#consultassid tbody").html(linha);

      $('.consultassid').dataTable({ 
        dom: 'Bflrtip',
        "pagingType": "full_numbers", 
        "iDisplayLength": 10,                          
        "oLanguage": {
        "sProcessing": "Aguarde enquanto os dados são carregados ...",
        "sLengthMenu": "Mostrar _MENU_ registos por página",
        "sZeroRecords": "Nenhum registo correspondente ao criterio encontrado",
        "sInfoEmpty": "Exibindo 0 a 0 de 0 registos",
        "sInfo": "Exibindo de _START_ a _END_ de _TOTAL_ registos",
        "sInfoFiltered": "",
        "sSearch": "<span class='glyphicon glyphicon-search'></span>",
        "oPaginate": {
          "sFirst":    "<i class='fa fa-fast-backward' aria-hidden='true'></i>",
          "sPrevious": "<i class='fa fa-backward' aria-hidden='true'></i></span>",
          "sNext":     "<i class='fa fa-forward' aria-hidden='true'></i>",
          "sLast":     "<i class='fa fa-fast-forward' aria-hidden='true'></i>"
          }
        },
        buttons: [
          {
            extend: 'excel',
                    text: 'excel',
                    title: 'Registo de Marcações',
      
          },
          {
              extend: 'pdf',
                      text: 'pdf',
                      title: 'Registo de Marcações',
                      
          },
          {
              extend: 'print',
                      text: 'print',
                      title: 'Registo de Marcações',
                      footer: true,
                      customize: function ( win ) {
                          $(win.document.body)
                              .css( 'font-size', '12pt' );
        
                          $(win.document.body).find( 'table' )
                              .addClass( 'compact' )
                              .css( 'font-size', 'inherit' );
                      }
          }
        ]
      });   

    });
  });
  
  $(function() {
    $(".btn-show").click(function(e) {
      e.preventDefault();
      el = $(this).data('element');
      $(el).show();
      $("section > div").not(el).hide();
    });
});
  
$(function() {
    $(".btn-hide").click(function(e) {
      e.preventDefault();
      el = $(this).data('element');
      $(el).hide();
    });
});

<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.colVis.min.js"></script>

<a href="s103" data-element="#minhaDiv103" class="btn-show cons-assid">
    <i class="metismenu-icon pe-7s-wristwatch"></i>
    Assiduidade
</a>
<section id="s103">
  <div style="display:none" id="minhaDiv103">
    <table class="align-middle mb-0 table table-borderless table-striped table-hover consultassid" id="consultassid">
        <thead>
            <tr>
                <th class="text-center">Colaborador</th>
                <th class="text-center">Serviço</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
          <tr>
              <td COLSPAN="0"></td>
              <td COLSPAN="1"><i class="pe-7s-pen"></i> Marcação modificada pelo Administrador</td>
          </tr>
        </tfoot>
    </table>
  </div>
</section>

The problem I have is that when I print the table, the fontawesome does not appear and I want it to be printed as well. Is it possible to get fontawesome to appear when I print the table to paper? This information is very important to appear, because it is a caption. Can you help?

Answer 1

I haven't actually tried it yet but the suggestion in the link from my comment is to use the stripHtml option, which would be something like this:

{
    extend: 'print',
    text: 'print',
    title: 'Registo de Marcações',
    footer: true,
    customize: function ( win ) {
        $(win.document.body).css( 'font-size', '12pt' );
        
        $(win.document.body).find( 'table' )
            .addClass( 'compact' )
            .css( 'font-size', 'inherit' );
    },
    exportData: {
        stripHtml: false
    }
}