如何在搜索框中添加图标

Posted 2023-03-05

【中文标题】如何在搜索框中添加图标

【英文标题】：How to add an icon in a search box

【发布时间】：2018-06-10 19:57:31

【问题描述】：

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

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

这是表单的图片：A html search form on a website's header

此处的表格链接（不是常青树）：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" value="" placeholder="Product Search…">
                <input type="hidden" name="post_type" value="product" />
            </span>
    </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;

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

【问题讨论】：

一旦您得到问题的答案，您链接的网站就会发生变化，让未来读者寻找答案的问题无关紧要。通过在问题本身中添加 minimal reproducible example 来确保您的问题仍然相关。

您好 Andrei，感谢您的反馈。我现在已经按照你的要求做了，请确认我做的好不好？

将答案标记为已接受足以告诉所有人您的问题已解决，您无需将其放入问题中。一般来说，去掉特殊的部分，只留下理解和回答问题所必需的部分，这是将重要问题与其他问题区分开来的事情之一。因为未来的读者会花更少的时间来理解它。感谢您调整您的问题，欢迎来到Stack Overflow。

【参考方案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" >

编辑：2020 年 7 月 23 日 我最近再次访问了这个问题，并想添加一个替代解决方案。我基本上复制了谷歌搜索栏的代码并添加了我自己的调整。搜索栏从左到右由标签、输入和按钮组成。

body 
  height: 100%;
  background-color: rgb(230, 230, 230);



/* -----search-container styles----- */

.search-container 
  --searchbox-height: 44px;
  margin: 0 auto 0 auto;
  min-width: 410px;
  width: var(--content-width);



/* -----searchbar styles----- */

.searchbar 
  background: white;
  cursor: text;
  margin: 0 auto;
  max-width: 584px;
  box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
  border-radius: 22px;
  box-sizing: border-box;
  font-size: 16px;
  height: var(--searchbox-height);
  position: relative;



/* -----search-input styles----- */

.search-input 
  box-sizing: border-box;
  margin: 0;
  height: 100%;
  width: calc(100% - 80px);
  border-color: transparent;
  color: rgb(117, 117, 117);
  font-size: 16px;
  line-height: 44px;
  margin: auto 0;
  overflow: hidden;
  text-align: initial;
  text-overflow: ellipsis;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;


.search-input:focus 
  outline: transparent;


.search-input:focus::placeholder 
  color: transparent;



/* -----search-icon styles---- */

.search-icon-wrapper 
  padding: 0 24px;
  /* margin-right: 48px; */


.search-icon 
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzVGNjM2OCI+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0E2LjQ3MSA2LjQ3MSAwIDAgMCAxNiA5LjUgNi41IDYuNSAwIDEgMCA5LjUgMTZjMS42MSAwIDMuMDktLjU5IDQuMjMtMS41N2wuMjcuMjh2Ljc5bDUgNC45OUwyMC40OSAxOWwtNC45OS01em0tNiAwQzcuMDEgMTQgNSAxMS45OSA1IDkuNVM3LjAxIDUgOS41IDUgMTQgNy4wMSAxNCA5LjUgMTEuOTkgMTQgOS41IDE0eiIvPjwvc3ZnPg==);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
  background-color: rgb(117, 117, 117);
  bottom: 0;
  left: 16px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 24px;



/* -----search-microphone styles----- */

.search-microphone 
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIvPjxwYXRoIGZpbGw9IiM0Mjg1RjQiIGQ9Ik0xMiAxNWMxLjY2IDAgMi45OS0xLjM0IDIuOTktM0wxNSA1YzAtMS42Ni0xLjM0LTMtMy0zUzkgMy4zNCA5IDV2N2MwIDEuNjYgMS4zNCAzIDMgM3oiLz48cGF0aCBmaWxsPSIjMzRBODUzIiBkPSJNMTEgMTguOTJoMlYyMmgtMnoiLz48cGF0aCBmaWxsPSIjRjRCNDAwIiBkPSJNNyAxMkg1YzAgMS45My43OCAzLjY4IDIuMDUgNC45NWwxLjQxLTEuNDFDNy41NiAxNC42MyA3IDEzLjM4IDcgMTJ6Ii8+PHBhdGggZmlsbD0iI0VBNDMzNSIgZD0iTTEyIDE3Yy0xLjM4IDAtMi42My0uNTYtMy41NC0xLjQ3bC0xLjQxIDEuNDFBNi45OSA2Ljk5IDAgMCAwIDEyLjAxIDE5YzMuODcgMCA2Ljk4LTMuMTQgNi45OC03aC0yYzAgMi43Ni0yLjIzIDUtNC45OSA1eiIvPjwvc3ZnPg==) no-repeat center;
  background-size: 21px 21px;
  bottom: 0;
  cursor: pointer;
  margin-inline-end: 16px;
  padding: 22px 12px 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 21px;
  border-color: transparent;

<div class="search-container">
  <div class="searchbar">
    <label for="search-input" class="search-icon-wrapper">
    <div class="search-icon"></div>
    </label>
    <input type="text" class="search-input" id="search-input" placeholder="Search Google or type a URL">
    <button class="search-microphone"></button>
  </div>
</div>

【讨论】：

感谢您的建议！我现在修改了这篇文章并将您的答案标记为最佳。