如何在 Select2 中插入 FontAwesome答案

【问题标题】：How to insert FontAwesome inside Select2如何在 Select2 中插入 FontAwesome
【发布时间】：2014-01-31 02:37:01
【问题描述】：

我不知道如何在 Select2 中插入 fontawesome。我应该在其中添加什么 CSS 或 JS？我有如下视图。

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

谁能帮帮我？

【问题讨论】：

标签： jquery html css jquery-select2 font-awesome

【解决方案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
});

希望有所帮助；）

【讨论】：

这不起作用。也许你再次检查小提琴@SiamKreative

【解决方案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;
}

【讨论】：

嗨，这对 select2 v3 非常有用。您是否知道如何使用 select2 v4 以及他们对 templateSelection 和 templateResults 所做的更改来使其工作。更新后图标不会出现。见小提琴。 http://jsfiddle.net/qCn6p/194/
嗨@WildWing，我用select2 v4创建了新的小提琴，请检查：jsfiddle.net/harisrozak/exad6124

【解决方案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/

【讨论】：

添加 span 解决了这个问题，我的代码现在可以使用 fontawesome 5 图标。跨度是诀窍。谢谢