Question

如何在Select2上的占位符文本之前添加FontAwesome。

这是我的Select2选项代码：

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

这是我的HTML代码：

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

谢谢。

Answer 1

在Select2选项之间声明escapeMarkup函数，然后使用＆＃34;搜索＆＃34; placeholder的图标代码（您可以在Font-Awesome Cheatsheet页面中找到）：

＆＃13;

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

＆＃13;

.select2 {
  font-family: 'FontAwesome'
}

＆＃13;

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

＆＃13;

在占位符上选择2字体真棒图标

1 个答案: