DataTables：在按钮中的文本旁边添加图标答案

【问题标题】：DataTables: Add icon next to text in buttonDataTables：在按钮中的文本旁边添加图标
【发布时间】：2016-08-01 10:42:36
【问题描述】：

我想在我的 DataTable 按钮中的文本左侧添加一个图标，但到目前为止它没有显示出来。这是添加按钮的 Javascript：

var buttons;

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

在 CSS 中：

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

我检查了here、here 和here。感谢您的指导。

【问题讨论】：

标签： javascript jquery css datatables tabletools

【解决方案1】：

嗯，这很简单。看起来我所要做的就是将 img 标签直接放入 Text 字符串中，我不知道这是可能的。

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

【讨论】：

【解决方案2】：

检查 icn_add.png 是否在适当的位置
由于 'button-add' 类将应用于锚点，请尝试以下 css -

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

或者，您可以使用font-awesome.css

【讨论】：

好的，谢谢您的回答！我找到了另一个解决方案，但这仍然有用。