在select2 V4下拉项目中添加fontawesome图标 [英] Add fontawesome icons into select2 V4 dropdown items

问题描述

我正在尝试在Select2 v4下拉列表中显示fontawesome图标。但是下拉列表显示的是html并且没有生成实际图标。此方法适用于select2 V3，但似乎不适用于v4。任何帮助表示赞赏。谢谢

I am trying to display fontawesome icons in the Select2 v4 dropdown items. But the dropdown is displaying the html and not generating the actual icon. This method works with select2 V3 but does not seem to with v4. Any help is appreciated. Thank you

HTML

<div class="select2-wrapper">
    <select class="input icons_select2">
        <option value="fa-dribbble" data-icon="fa-dribbble">Dribbble</option>
        <option value="fa-dropbox" data-icon="fa-dropbox">Dropbox</option>
        <option value="fa-facebook" data-icon="fa-facebook">Facebook</option>
    </select>
</div>

JS

function iformat(icon) {
var originalOption = icon.element;
return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text;
}
$('.icons_select2').select2({
width: "100%",
templateSelection: iformat,
templateResult: iformat
});

查看小提琴示例：
http://jsfiddle.net/qCn6p/206/

推荐答案

以下是您更新的 小提琴

Here are your updated fiddle

你必须将你的元素包装在jquery中，如下所示：

You have to wrap your element inside of jquery like this:

function iformat(icon) {
    var originalOption = icon.element;
    return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '</span>');
}
$('.icons_select2').select2({
    width: "100%",
    templateSelection: iformat,
    templateResult: iformat,
    allowHtml: true
});

这篇关于在select2 V4下拉项目中添加fontawesome图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！