javascript - Font Awesome 图标选择器在图标旁边显示字体信息文本

Question

我有以下代码基于 Material 图标选择器的代码笔，并且我正在尝试为 Font Awesome 创建一个代码。图标使用以下代码显示，但图标旁边还有图标的名称(即 fas fa-home)。如果我删除行 '$icon.text(icon);'在 forEach 函数中，文本确实消失了，但搜索不再有效。当我使用 Material 图标时，这不是问题。我在这里缺少什么？

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

};

Answer 1

您可以删除 $icon.text(icon); 然后文本将消失，之后只需在您的 keyup 事件中按类名搜索:

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