How to render jQuery DataTable Boolean column with check and x?

Question

I would like to use the following columnDef on two boolean columns to display a check for true and x for false. However, nothing gets displayed on the columns:

{
    targets: [5, 6],
    render: function (data, type, row) {
        return (data === true) ? '<span class="glyphicon glyphicon-ok txt-green"></span>' : '<span class="glyphicon glyphicon-remove txt-red"></span>';
    }
}

The following does work, but it is difficult to see the checkmarks for values that are true. I prefer the glyphicon option:

{
    targets: [5, 6],
    render: function (data, type, full, meta) {
        return data ? '<input type="checkbox" disabled checked/>' : '<input type="checkbox" disabled />';
    }
}

Answer 1

The glyphicons example was not working because they are no longer supported in Bootstrap 4 and above.

The following is my solution using fontawesome icons:

{
    targets: [5, 6],
    render: function (data) {
        return data ? '<span class="fa fa-solid fa-check" style="color: green"></span>' : '<span class="fa fa-solid fa-times" style="color: red"></span>';
    }
}