How to add icon in select2?

Question

I using select2 version 4

I try like this :

$("select02").select2({
    placeholder: "<i class='fa fa-sitemap'></i>Branch name",
});

But, it's not working

Demo is like this : http://jsfiddle.net/fc1qevem/8/

Any solution to solve my problem?

Solution 1

Found this How to add html placeholder to select2?

So what you need is:

$("select02").select2({
  placeholder: '<i class="fa fa-sitemap"></i>Branch name',
  escapeMarkup : function(markup) {
    return markup;
  }
});

Solution 2

For Icons instead of img use:

function format (state) {
    if (!state.id) { return state.text; }
    return '<i class="fa fa-lg '+state.id.toLowerCase()+'"></i> '+state.text;
} 

$("#select2icon").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
});