javascript - 如何使用 Font Awesome 图标作为 HTML 表单中的提交按钮

Question

我试图让这个 FontAwesome 搜索图标充当提交按钮:

Search form submit IMG

搜索表单链接(非常青树):

https://themirrorman.co

我已经查看了其他各种问题，包括 JS 的使用和按钮标签的使用，但仍然无法使其正常工作。

这是我的代码:

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>

使用 JS 在“/head 之前的空间”中创建提交功能的想法？ :

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

我显然做错了什么，请帮助 =D

Answer 1

您需要使提交按钮具有 FontAwesome 作为 font-family，并使用  作为值。

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

您可以使用额外的 CSS 来更改按钮的样式。