如何在动态创建的按钮中添加字体真棒图标

Question

在我的 HTML 页面中，我在特定列的每一行中都有一个按钮。用户可以在运行时添加新行，这些按钮也会与每行中的其余字段一起插入。

正在使用以下方式附加按钮：

function funcAddBtnOpenPad() {   // This funct being called at page onload
// VARS FOR ADDING BUTTON IN CELL "5"
// STORING BUTTON ATTRIBUTES
var btnOpenPad = $('<input/>').attr({ type: 'button', id:'idBtnOpenPad', class:'clsBtnOpenPad', name:'btnOpenPad', value:'OpenPad' });

$('#childTable tr').each(function(tempRowIdx) {
    
// CONSTRUCT TAG FOR BUTTON "OpenPad" IN CELL "5"
    tempButtonCellTag = 'id_tIndx'+tempRowIdx+5;

// HERE WE ARE INSERTING THE BUTTON "OpenPad" <<<<
        $('#'+ tempButtonCellTag).append(btnOpenPad);
});
}

现在要在按钮中插入 icon，我将 ref 添加到按钮类中的 fa icon 中，如下所示：

var btnOpenPad = $('<input/>').attr({ type: 'button', id:'idBtnOpenPad', class:'clsBtnOpenPad fa fa-pencil', name:'btnOpenPad', value:'OpenPad' });

但是，按钮中完全没有图标，唯一的变化是按钮的大小和文本的字体发生了变化。

我的问题是：有没有办法在按钮中插入一个很棒的字体图标？

此处复制带有按钮的 html 表格的图像。

Answer 1

尝试通过 html () 而不是 appand() 添加

let ButtonCellTag = $('#'+ tempButtonCellTag);
ButtonCellTag.html(ButtonCellTag.html() + btnOpenPad)