在元素单击上更改图标unicode

时间:2019-02-01 14:53:34

标签: javascript jquery html font-awesome

我有一个带有两个输入的表格。其中一个用于文本输入,另一个用于提交,如按钮。我在该提交图标中添加了一个图标,我想在单击时进行更改。

<input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002">


$(document).ready(function() {
    'use strict';
    $(".searchInput").on("click", function () {
        $(".searchBtn").attr("value", "&#xf105")
    })
}) 

第一个图标与该unicode值配合正常,但是当我单击它时显示&#xf105,而不是该图标为unicode。

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:1)

这是解决方案(使用序列\u进行转义):

$(document).ready(function() {
    'use strict';
    $(".search-btn").on("click", evt => {
        $(evt.target).attr("value", "\uf105");
    })
}) 
@charset "UTF-8";
.search-btn {
  font-family: "FontAwesome";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="search-btn" id="submit" name="submit" type="submit" value="&#xf002">