在元素单击上更改图标unicode

Question

I have a form with one two inputs. One of them is for text input and the another one is for submit, like a button. I added an icon in that submit one and I want to change it on click.

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


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

The first icon works fine with that unicode value, but when I click it shows &#xf105 , not the icon for which that is the unicode.

Answer 1

Here's the solution (use the sequence \\u\u003c/code> to escape):

 $(document).ready(function() { 'use strict'; $(".search-btn").on("click", evt => { $(evt.target).attr("value", "\"); }) }) 

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