Question

我不知道如何在Select2中插入fontawesome。我应该在其中添加CSS或JS？我有一个如下的观点。

点击：http://s10.postimg.org/675fig9vd/Capture121212121.png

任何人都可以帮助我吗？

Answer 1

根据我的插件WP Mobile Splash Page Editor，我做了一个快速的小提琴：http://jsfiddle.net/SiamKreative/qCn6p/

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

希望有所帮助;）

Answer 2

根据SiamKreative答案，您还可以将formatSelection添加到select2选项，以便所选项目也可以包含图标。以下是详细代码：

JavaScript的：

function format(icon) {
    var originalOption = icon.element;
    return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text;
}

$('.wpmse_select2').select2({
    width: "100%",
    formatResult: format,
    formatSelection: format
});

添加此css代码以设置所选项目的样式：

.select2-chosen .fa {
    float: right;
    position: relative;
    line-height: 26px;
}

Answer 3

您需要返回一个jquery对象而不是字符串，以防止它在v4中被转义

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

http://jsfiddle.net/dleffler/15myta6t/

如何在Select2中插入Font Awesome

3 个答案: