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

Question

已解决的代码供您参考：

<div id="header-search-desktop-div">
<form id="header-search-form" role="search" action="https://themirrorman.co/" method="get">
    <fieldset>
        <span class="text">
            <input id="header-search-desktop-span" style="border-radius: 24px;" type="text" value="" name="s" class="s" placeholder="I am looking for..." />
            <input id="header-search-submit" type="submit" value="&#xf002;" name="post_type" />
        </span>
    </fieldset>
</form>
</div>

#header-search-submit {
    position: absolute;
    z-index: 1;
    padding: 0;
    right: 15px;
    top: 6px;
    font-size: 24px;
    font-family: FontAwesome;
    color: #7B7B7B;
    cursor: pointer;
    background: 0;
    border: 0;
}

回到原始问题：

我正在尝试将此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在'Space before / 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来更改按钮的样式。

Answer 2

把它放在button标签内

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

Answer 3

我建议你使用fontawesome这样做，你可以下载字体并将其放在你的HTML项目。你也可以使用bootstrap用按钮制作一个input group。

我也做这个fiddle