[英]Select2 Font Awesome Icon on Placeholder
How to add FontAwesome before the placeholder text on Select2. 如何在Select2上的占位符文本之前添加FontAwesome。
This is my Select2 option code: 这是我的Select2选项代码:
var placeholder = "<i class='fa fa-search'></i> " + "Select a places";
$(".select2").select2({
placeholder: placeholder,
width: null
});
This is my HTML code: 这是我的HTML代码:
<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. 谢谢。
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
: 在Select2选项之间声明escapeMarkup
函数,然后使用“搜索”图标代码(您可以在Font-Awesome Cheatsheet页面中找到它)作为placeholder
:
$(function() { var placeholder = " 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.