Question

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

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

以下是表格形象：
A HTML search form on a website's header

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

这是我的原始代码：

＆＃13;

@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;
  }
}

＆＃13;

<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" value="" placeholder="Product Search…">
                <input type="hidden" name="post_type" value="product" />
            </span>
    </form>
</div>

＆＃13;

以下代码我收到了答案并进行了更改，现在的工作方式与上面的图片链接类似：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

检查以下代码的灵感来自此链接： How do I add a Font Awesome icon to input field?

input[type="search"] {
    font-family: FontAwesome;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>


<!-- Where fOO2 is the Unicode value for the fa-search icon -->

<input type="search"  placeholder="&#xf002 Search" >

如何在搜索框中添加图标

1 个答案: