0

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.

Community
  • 1
  • 1
Alycus
  • 221
  • 1
  • 4
  • 15

2 Answers2

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()
            }
        };
Alycus
  • 221
  • 1
  • 4
  • 15
0
  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

sid
  • 157
  • 1
  • 11