प्लेसहोल्डर पर चयन 2 फ़ॉन्ट विस्मयकारी आइकन

Question

Select2 पर प्लेसहोल्डर टेक्स्ट से पहले FontAwesome को कैसे जोड़ें।

यह मेरा Select2 विकल्प कोड है:

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

धन्यवाद:

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

यह मेरा एचटीएमएल कोड है।

Answer 1

Select2 विकल्पों के बीच escapeMarkup समारोह घोषित, तो का उपयोग "खोज" आइकन कोड placeholder के लिए (आप Font-Awesome Cheatsheet पेज में पा सकते हैं):

$(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>