如何在 HTML 表单中使用 FontAwesome 图标作为提交按钮答案

【问题标题】：How to use FontAwesome icon as submit button in HTML form如何在 HTML 表单中使用 FontAwesome 图标作为提交按钮
【发布时间】：2018-06-11 01:14:54
【问题描述】：

我正在尝试让这个 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

【问题讨论】：

标签： javascript html css forms font-awesome

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

把它放在button标签内

<button class="btn">
    <i class="fa fa-search" aria-hidden="true"></i>
</button>

【讨论】：