Javascript 字体真棒图标选择器，在图标旁边显示字体信息文本

我已经得到了以下代码的基础上的代码笔材料图标选择器，并试图创建一个字体真棒。图标使用以下代码显示，但图标旁边还有图标名称（即fas fa home）。如果我删除行“$icon.text（icon）；”在forEach函数中，文本确实消失，但搜索不再工作。当我使用材质图标时，这不是问题。我错过了什么

function fontawesomeMarkers() {
var fontawesome_icons = ['fas fa-home', 'fas fa-map-marker-alt', 'fas fa-beer', 'fas fa-flag', 'fas fa-globe'];

$('input[type="text"].use-icon-picker').each(function () {
    // Add the current icon as a prefix, and update when the field changes.
    $(this).before('<i class="icon-picker-prefix prefix"></i>');
    $(this).on('change keyup', function(){
        $(this).prev().text($(this).val());
    });
    $(this).prev().text($(this).val());
    // Append the picker and the search box.
    var $picker = $('<div class="icon-picker"></div>');
    var $search = $('<input type="text" placeholder="Search...">');
    // Do simple filtering based on the search.
    $search.on('keyup', function () {
        var search = $search.val().toLowerCase();
        var $icons = $(this).siblings('.icons');
        $icons.find('i').css('display', 'none');
        $icons.find('i:contains('+search+')').css('display', 'inline-block');
    });

    $picker.append($search);
    // Append each icon into the picker.
    var $icons = $('<div class="icons"></div>');
    function onIconClick() {
        $(this).closest('.icon-picker').prev().val($(this).text()).trigger('change');
    }
    fontawesome_icons.forEach(function (icon) {
        var $icon = $('<i class="custom-icons"></i>');
        var classText = icon;
        $icon.addClass(classText);
        $icon.text(icon);
        $icon.on('click', onIconClick);
        $icons.append($icon);
    });
    // Show the picker when the input field gets focus.
    $picker.append($icons).hide();
    $(this).after($picker);
    $picker.show();
    $(this).on('focusin', function () {
        $picker.show();
    });
});

// Hide any picker when it or the input field loses focus.
$(document).on('mouseup', function (e) {
    var $picker = $('.icon-picker');
    if ($picker.length && !$picker.is(e.target) && !$(e.target).hasClass('use-icon-picker') && $picker.has(e.target).length === 0) {
    $picker.hide();
    }
});

函数fontawesomeMarkers（）{
变量图标=['fas fa home'，'fas fa map MARK alt'，'fas fa beer'，'fas fa flag'，'fas fa globe']；
$（'input[type=“text”].使用图标选择器'）。每个（函数（）{
//添加当前图标作为前缀，并在字段更改时更新。
$（本）。在（''）之前；
$（this）.on（'change keyup'，function（））{
$（this.prev（）.text（$（this.val（））；
});
$（this.prev（）.text（$（this.val（））；
//附加选择器和搜索框。
变量$picker=$（''）；
var$search=$（''）；
//根据搜索进行简单筛选。
$search.on（'keyup'，函数（）{
var search=$search.val（）.toLowerCase（）；
var$icons=$（this.sillers（'.icons'）；
$icons.find（'i'）.css（'display'，'none'）；
$icons.find（'i:contains（'+search+'）））.css（'display'，'inline block'）；
});
$picker.append（$search）；
//将每个图标附加到选择器中。
变量$icons=$（''）；
函数onIconClick（）{
$（this）.closest（'.icon picker'）.prev（）.val（$（this）.text（））.trigger（'change'）；
}
fontu图标。forEach（函数（图标）{
变量$icon=$（''）；
var classText=图标；
$icon.addClass（classText）；
$icon.text（图标）；
$icon.on（'click'，onIconClick）；
$icons.append（$icon）；
});
//当输入字段获得焦点时显示选择器。
$picker.append（$icons.hide（）；
$（此）.after（$picker）；
$picker.show（）；
$（this）.on（'focusin'，function（）{
$picker.show（）；
});
});
//当选择器或输入字段失去焦点时隐藏任何选择器。
$（文档）.on（'mouseup'，函数（e）{
变量$picker=$（'.icon picker'）；
如果（$picker.length&！$picker.is（e.target）&&！$（e.target）.hasClass（'use-icon-picker'）&&&$picker.has（e.target）.length==0）{
$picker.hide（）；
}
});

---

})

您可以删除

$icon.text（图标）然后文本将消失，然后只需在keyup事件中按类名搜索：

$icons.find('i[class*="' + search + '"]').css('display', 'inline-block');

因为没有文本可供比较，所以contains将被破坏。因此，您必须更改搜索查找匹配项的方式。$icon.text（icon）；设置文本，这可能是您看到图标名称的原因；我相信你必须将它设置为一个属性；也许是试图摆弄attr而不是text，上面的方法非常有效。我试过摆弄那句台词，但就是没有为全班做正确的组合。非常感谢。