Icons Missing in jQuery Bootgrid

I have an MVC C# Web Application and am using jQuery Bootgrid. The bootgrid is populating fine, the issue is I can't seem to get the icons in front of the top right drop downs. See screen shots attached. I am using bootstrap 4. I believe the jquery bootgrid is having a conflict with the fontawesome, but I can't seem to resolve. I have attached screenshots of what I need and what I have.

chtml snippet -----------------------------------------------------------
    <script>
    var grid = $("#grid-data").bootgrid({
        ajax: false,
        caseSensitive: false,
        columnSelection: true,
        formatters: {
            "commands": function (column, row) {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.audience_id + "," + row.client_id + "," + row.audience_name + "," + row.active + "\"><span class=\"fas fa-pencil-alt\"></span></button> " +
                    "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.audience_id + "\"><span class=\"fas fa-trash-alt\"></span></button>";
            },
        }
    }).on("loaded.rs.jquery.bootgrid", function () {
        /* Executes after data is loaded and rendered */
        grid.find(".command-edit").on("click", function (e) {
            $("#EditAudience").modal("show");
            var array = $(this).data("row-id").split(',');
            $("#edit_Audience_ID").val(array[0])
            $("#edit_Client_ID").val(array[1]);
            $("#edit_Audience_Name").val(array[2]);
            $("#edit_Active").prop("checked", (array[3] === "Yes" ? true : false));

        }).end().find(".command-delete").on("click", function (e) {
            $("#DeleteAudience").modal("show");
            $("#del_Audience_ID").val($(this).data("row-id"));
        });
            });
        $("#grid-data-header").find('.actionBar').prepend(
            '<button id="btnAddAudience" class="btn btn-primary tx-11 tx-uppercase pd-y-12 pd-x-25 tx-mont tx-medium float-left" type="button" data-toggle="modal" data-target="#AddAudience">Add Audience</button>');
        $(document).ready(function () {
            $("#Success").modal('@(Success.Equals("true") ? "show" : "hide")');
            $("#Failure").modal('@(Success.Equals("false") ? "show" : "hide")');
        });
    </script>
}

<div class="br-section-wrapper">
    <table class="table table-condensed table-hover table-striped" id="grid-data">
        <thead>
            <tr class="grid-header-nav">
                <th data-column-id="client_id" data-visible="false">Client ID</th>
                <th data-column-id="client_name">Client Name</th>
                <th data-column-id="audience_id" data-visible="false">Audience ID</th>
                <th data-column-id="audience_name" data-order="desc">Audience Name</th>
                <th data-column-id="active" data-type="">Active</th>
                <th data-column-id="when_updated">Updated</th>
                <th data-column-id="who_updated">Updated By</th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
            </tr>
        </thead>
        <tbody>
            @{
                foreach (Audience audience in Model.Audiences)
                {
                    <tr>
                        <td>@audience.Client_ID</td>
                        <td>@audience.Client_Name</td>
                        <td>@audience.Audience_ID</td>
                        <td>@audience.Audience_Name</td>
                        <td>@(audience.Active == true ? "Yes" : "No")</td>
                        <td>@audience.Updated.ToLocalTime().ToString("M/dd/yyyy")</td>
                        <td>@audience.Updated_By_Name</td>
                        <td></td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

Script snippet -----------------------------------------------------------
    <script src="~/Scripts/lib/jquery/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="~/Scripts/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Scripts/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
    <script src="~/Scripts/lib/moment/moment.js"></script>
    <script src="~/Scripts/lib/jquery-ui/jquery-ui.js"></script>
    <script src="~/Scripts/lib/jquery-switchbutton/jquery.switchButton.js"></script>
    <script src="~/Scripts/lib/peity/jquery.peity.js"></script>
    <script src="~/Scripts/lib/highlightjs/highlight.pack.js"></script>
    <script src="~/Scripts/lib/select2/js/select2.min.js"></script>
    <script src="~/Scripts/lib/jquery.bootgrid-1.3.1/jquery.bootgrid.min.js"></script>
    <script src="~/Scripts/js/bracket.js"></script>
EX-IconsNeeded.PNG
EX-IconsMissing.PNG