How to use FontAwesome icon as submit button in HTML form

Question

I'm trying to get this FontAwesome search icon to act as a submit button:

Search form submit IMG

Link to search form (not evergreen):

https://themirrorman.co

I've looked through various other questions, including use of JS and using a button tag, and still couldn't get this to work.

Here is my code:

CSS:

#header-search-submit {
position: absolute;
z-index: 1;
right: 36px;
top: 6px;
font-size: 24px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}

input[type="text"] {
border: 1px solid #881d98;
border-radius: 24px;
border-color: white;
}

/* header search desktop */
@media screen and (min-width: 800px) {
#header-search-desktop-div {
    position: absolute;
    left: 150px;
    width: 450px;
    margin-top: 0;
    margin-bottom: 0;
}
}

HTML:

<div id="header-search-desktop-div">
<form id="header-search-form" class="search" action="https://themirrorman.co/" method="get">
    <fieldset>
        <span class="text">
            <input name="product-search" id="header-search-desktop-span" type="text" value="" placeholder="Product Search…" /><i id="header-search-submit" class="fa fa-search"></i>
        </span>
    </fieldset>
    <input type="hidden" name="post_type" value="product" />
</form>
</div>

The idea of using JS to create the submit function in the 'Space before /head' ? :

<script>$('#header-search-desktop-span').click(function() { 
alert('Searching for '+$('#header-search-submit').val());
});
</script>

I'm clearly doing something very wrong, please help =D

Answer 1

You'll need to make the submit button have FontAwesome as the font-family, and use  as the value.

<input style="font-family: FontAwesome" value="&#xf002;" type="submit">

You can use additional CSS to change the styling of the button.