Изменение иконки Unicode при нажатии элемента

Question

У меня есть форма с одним двумя входами.Один из них для ввода текста, а другой для отправки, как кнопка.Я добавил значок в эту отправку, и я хочу изменить его при нажатии.

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

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