如何在Select2中插入FontAwesome内容

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

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

谁能帮助我？

2014-01-31 Sofyan Setiawan

基于我的插件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 
});

希望帮助;）

来源

2014-02-05 03:16:20 SiamKreative

是的，这很棒..谢谢 –

基于SiamKreative的回答，您还可以添加formatSelection以选择二选项，以便所选项目也可以有图标。下面是详细的代码：

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

来源

2016-07-15 04:35:57 harisrozak

嗨，这对于select2 v3非常适用。你知道如何使用select2 v4来改变他们对templateSelection和templateResults的改变。进行更新后，图标不显示。看小提琴。 [http://jsfiddle.net/qCn6p/194/](http://jsfiddle.net/qCn6p/194/） – WildWing

嗨@WildWing，我用select2 v4创建了新的小提琴，请检查：http：// jsfiddle达网络/ harisrozak/exad6124 / – harisrozak

你需要返回一个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/

来源

2017-12-21 17:51:33 user2030404

如何在Select2中插入FontAwesome内容

回答

相关问题