Select2 Font Awesome Icon on Placeholder

Question

How to add FontAwesome before the placeholder text on Select2.

This is my Select2 option code:

var placeholder = "<i class='fa fa-search'></i>  " + "Select a places";
$(".select2").select2({
    placeholder: placeholder,
    width: null
});

This is my HTML code:

<select class="form-control select2">
    <option></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Thank you.

Select box has not placeholder property.. so please use first option to placeholder. — JavidRathod, Feb 15 '16 at 09:17
I'm sorry, I mean the icon is on the left of the placeholder text. — cocksparrer, Feb 15 '16 at 09:17
@javedrathod, thank you for the comment, but select2 has it. — cocksparrer, Feb 15 '16 at 09:22
http://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder this might be helpful. :) — Ajay Makwana, Feb 15 '16 at 09:40
@javedrathod, yes. but I hope it can be editable so I can change it with different icon someday. — cocksparrer, Feb 15 '16 at 09:42
@AjayMakwana, thank you I've been there. unfortunately, like javedrathod said, select box has not placeholder property. that page you refer are for input box. — cocksparrer, Feb 15 '16 at 09:46

Alessio Cantarella · Accepted Answer · 2016-02-15T10:30:33.733

10

Declare the escapeMarkup function between Select2 options, then use "search" icon code (you can find it in the Font-Awesome Cheatsheet page) for the placeholder:

$(function() {
  var placeholder = "&#xf002 Select a place";
  $(".select2").select2({
    placeholder: placeholder,
    width: null,
    escapeMarkup: function(m) { 
       return m; 
    }
  });
});

.select2 {
  font-family: 'FontAwesome'
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>

<select class="form-control select2">
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

edited Feb 15 '16 at 10:30

answered Feb 15 '16 at 09:44

Alessio Cantarella

5,077
3
27
34

1

Worked successfully. Thank you! – cocksparrer Feb 15 '16 at 10:24
@MarcosDiPaolo that was the case of his question – Alessio Cantarella Feb 08 '20 at 15:41
hi @AlessioCantarella, yes. Do you have a way of using a non escaped placeholder in a mmultiple select? – Marcos Di Paolo Feb 09 '20 at 03:52
@MarcosDiPaolo create a new question on StackOverflow – Alessio Cantarella Feb 09 '20 at 15:37
@AlessioCantarella sorry you're right. Here's my question: https://stackoverflow.com/questions/60141438/non-escaped-select2-placeholder-on-multiple-select – Marcos Di Paolo Feb 09 '20 at 21:21

Select2 Font Awesome Icon on Placeholder

1 Answers1

Linked