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

Posted 2023-05-09

【中文标题】DataTables：在按钮中的文本旁边添加图标

【英文标题】：DataTables: Add icon next to text in button

【发布时间】：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。感谢您的指导。

【参考方案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

【讨论】：

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