占位符上的Select2字体真棒图标 [英] Select2 Font Awesome Icon on Placeholder
本文介绍了占位符上的Select2字体真棒图标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在Select2上的占位符文本之前添加FontAwesome.
How to add FontAwesome before the placeholder text on Select2.
这是我的Select2选项代码:
This is my Select2 option code:
var placeholder = "<i class='fa fa-search'></i> " + "Select a places";
$(".select2").select2({
placeholder: placeholder,
width: null
});
这是我的HTML代码:
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>
谢谢.
推荐答案
在Select2选项之间声明escapeMarkup
函数,然后使用搜索"图标代码(您可以在
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 = " 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>
这篇关于占位符上的Select2字体真棒图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文