CODEWITHSUNDEEP
javascriptjquerycssdatatablestabletools
Alycus
Alycus

Reputation: 221

DataTables: Add icon next to text in button

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.

Upvotes: 0

Views: 3804

Answers (2)

Alycus
Alycus

Reputation: 221

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()
            }
        };

Upvotes: 1

sid
sid

Reputation: 157

  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

Upvotes: 0

Related Questions