Question

我从用于材质图标选择器的代码笔中获得了以下代码，并正在尝试为超棒的字体创建代码。使用以下代码显示图标，但图标旁边也有图标的名称（即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();
    }
});

};

Answer 1

您可以删除$icon.text(icon);，然后文本消失，然后在keyup事件中按类名进行搜索：

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

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

1 个答案: