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

Question

我正在尝试让这个 FontAwesome 搜索图标充当提交按钮：

\n\n

搜索表单提交IMG

\n\n

搜索表单链接（非常绿）：

\n\n

https://themirrorman.co

\n\n

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

\n\n

这是我的代码：

\n\n

CSS：

\n\n

#header-search-submit {\nposition: absolute;\nz-index: 1;\nright: 36px;\ntop: 6px;\nfont-size: 24px;\ncolor: #7B7B7B;\ncursor: pointer;\nwidth: 0;\n}\n\ninput[type="text"] {\nborder: 1px solid #881d98;\nborder-radius: 24px;\nborder-color: white;\n}\n\n/* header search desktop */\n@media screen and (min-width: 800px) {\n#header-search-desktop-div {\n    position: absolute;\n    left: 150px;\n    width: 450px;\n    margin-top: 0;\n    margin-bottom: 0;\n}\n}\n

\n\n

HTML：

\n\n

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

\n\n

使用JS在“/head之前的空格”中创建提交函数的想法？:

\n\n

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

\n\n

我显然做了一些非常错误的事情，请帮忙=D

\n

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>