DataTables: Add icon next to text in button

Question

I'd like to add an icon to the left side of the text in the buttons for my DataTable, but it's not showing up so far. This is the Javascript I have for the Add button:

var buttons;

$.fn.dataTable.ext.buttons.add = {
            className: 'button-add',
            text: '<i class="dt-button button-add"></i> Add Branch',
            action: function (dt) {
                onBtnAddClicked()
            }
        };

And in CSS:

.fn.dataTable.ext.buttons.add.button-add span{
    background: url(../img/icn_add.png) no-repeat center left;
}

I've checked here , here , and here . Thanks for any guidance.

Answer 1

Well, that was simple. Looks like all I had to do was put the img tags directly into the Text string, I didn't know that was possible.

$.fn.dataTable.ext.buttons.add = {
            //className: 'button-add',
            text: '<img src="../img/icn_add.png" style="padding-bottom: 2.25px; padding-right: 6px"> Add Branch',
            action: function (dt) {
                onBtnAddClicked()
            }
        };

Answer 2

1. Check icn_add.png is at appropriate location

2. As 'button-add' class will be applied to anchor, Try following css -

   a.button-add span{ background: url(../img/icn_add.png) no-repeat center left; }

Alternatively, you can use font-awesome.css