CODEWITHSUNDEEP
jqueryhtmlcssjquery-select2font-awesome
Sofyan Setiawan
Sofyan Setiawan

Reputation: 347

How to insert FontAwesome inside Select2

I have no idea how to insert fontawesome inside Select2. What should I add the CSS or JS in it? I have a view like below.

click : http://s10.postimg.org/675fig9vd/Capture121212121.png

Can anyone help me?

Upvotes: 3

Views: 6662

Answers (3)

SiamKreative
SiamKreative

Reputation: 126

Based on my plugin WP Mobile Splash Page Editor, I made a quick fiddle: 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
});

Upvotes: 8

user2030404
user2030404

Reputation: 86

You need to return a jquery object instead of a string to prevent it being escaped in 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/

Upvotes: 2

harisrozak
harisrozak

Reputation: 101

Based on SiamKreative answer, you can also add formatSelection to select2 options so the selected item can have the icon too. Below is detailed code:

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

Add this css code to style the selected item:

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

Upvotes: 4

Related Questions