javascript - Select2 Font Awesome Icon on Placeholder - Stack Overflow

admin管理员组

文章数量:1278983

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.

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.

• javascript
• jquery
• twitter-bootstrap
• font-awesome
• jquery-select2

Share Improve this question Follow asked Feb 15, 2016 at 9:10 cocksparrercocksparrer 21911 gold badge66 silver badges1717 bronze badges 10

• what do you mean with 'before' ? – Jonas Commented Feb 15, 2016 at 9:15
• Select box has not placeholder property.. so please use first option to placeholder. – JavidRathod Commented Feb 15, 2016 at 9:17
• I'm sorry, I mean the icon is on the left of the placeholder text. – cocksparrer Commented Feb 15, 2016 at 9:17
• @javedrathod, thank you for the ment, but select2 has it. – cocksparrer Commented Feb 15, 2016 at 9:22
• i think you want search icon before select 2 right? – JavidRathod Commented Feb 15, 2016 at 9:28

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 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./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

本文标签： javascriptSelect2 Font Awesome Icon on PlaceholderStack Overflow