How to add html placeholder to select2?

Question

I want to add one icon to placeholder like this

$(\"#tag_list\").select2({
    allowClear: true,
    placeholder: \"         


        

Answer 1

Im guessing your are trying to use font-awesome. They have a cheatsheet with unicodes here: http://fortawesome.github.io/Font-Awesome/cheatsheet/ This can be placed in the placeholder in html:

Remember to add the on the input element:

font-family: 'FontAwesome'

This is not supported by all browsers so you might want to do a fallbackhack with the :before element.

.wrapper:before {
  font-family: 'FontAwesome';
  color:red;
  position:relative;
  content: "\f042";
}

Last fallback is to actually use an image like this:

background-image: url(http://www.levenmetwater.nl/static/global/images/icon-search.png);
background-position: 10px center;
background-repeat: no-repeat;

If you want it to remove the icon on focus, add this:

input:focus {
 background-position: -20px center;
 text-indent: 0;
 width: 50%;
}