DataTables: Hinzufügen Symbol neben Text in Button

Question

Ich möchte ein Symbol auf der linken Seite des Textes in den Schaltflächen für meine DataTable hinzufügen, aber es wird nicht so weit angezeigt. Dies ist die Javascript ich für die Schaltfläche Hinzufügen haben:

var buttons; 

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

Und in CSS:

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

I here, here und here überprüft haben. Danke für jede Anleitung.

Answer 1

1. prüfen icn_add.png ist an geeigneter Stelle

2. As 'button-Add' Klasse zu verankern angewendet werden soll, versuchen Sie folgende CSS -

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

Alternativ Sie kann font-awesome.css

Answer 2

Nun, das war einfach. Sieht so aus, als ob ich nur die img-Tags direkt in die Textzeichenfolge schreiben müsste, ich wusste nicht, dass das möglich ist.

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