小编Vis*_*dry的帖子

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

搜索表单提交IMG

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

https://themirrorman.co

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

这是我的代码：

CSS：

#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

HTML：

<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 …

要涵盖的问题：
如何在搜索框/表单
中添加图标 如何在输入字段中添加图标

我遇到了以下问题，我无法让 FontAwesome fa-search 图标位于输入字段/搜索框的右侧。

这是表单的图像：
网站标题上的 HTML 搜索表单

链接到这里的表格（不是常青树）：https :
//www.themirrorman.co

这是我的原始代码：

@media screen and (min-width: 800px) {
  #header-search-desktop-div {
      position: absolute;
      left: 180px;
      width: 450px;
      margin-top: 0;
      margin-bottom: 0;
      border: 1px solid #881d98;
      border-radius: 24px;
  }
  #header-search-desktop-div #header-search-fa {
      position: absolute;
      color: #7E7E7E;
      z-index: 100;
      font-size: 27px;
  }
  #header-search-desktop-div .fa-search {
      top: 5%;
      left: 1.5%;
      line-height: 0.8em;
  }
}

<div id="header-search-desktop-div">
    <form role="search" method="get" class="searchform" action="https://themirrorman.co/">
            <span id="header-search-fa" class="fa fa-search">
                <input id="header-search-desktop-input" name="product-search" type="text" …