Cómo agregar un icono en un cuadro de búsqueda

5 minutos de lectura

avatar de usuario
VisualWizardry

Preguntas a cubrir:
Cómo agregar un icono en un cuadro de búsqueda/formulario
Cómo agregar un icono en un campo de entrada

Tuve el siguiente problema por el cual no podía hacer que el ícono de búsqueda fa de FontAwesome se ubicara a la derecha del campo de entrada/cuadro de búsqueda.

Aquí hay una imagen del formulario:
Un formulario de búsqueda HTML en el encabezado de un sitio web

Enlace al formulario aquí (no siempre verde):
https://www.themirrorman.co

Aquí está mi código original:

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

El siguiente código en el que recibí respuestas y lo cambié, ahora funciona como en el enlace de la imagen de arriba:

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

  • Una vez que obtenga una respuesta a su pregunta, el sitio web que vinculó cambiará, dejando la pregunta irrelevante para los futuros lectores que buscan una respuesta. Asegúrese de que su pregunta siga siendo relevante agregando un ejemplo reproducible mínimo en la pregunta misma.

    – tao

    30 de diciembre de 2017 a las 23:59


  • Hola Andrei gracias por los comentarios. Ya hice lo que me pediste. Por favor, confirma si lo que hice está bien.

    – Magia visual

    31 de diciembre de 2017 a las 11:11

  • marcar una respuesta como aceptada es suficiente para decirles a todos que su problema está resuelto, no necesita ponerlo en la pregunta. En general, sacar lo particular y dejar solo lo necesario para comprender y responder la pregunta es una de las cosas que diferencia a las grandes preguntas del resto. Porque los futuros lectores dedican menos tiempo a entenderlo. Gracias por ajustar su pregunta y bienvenido a Stack Overflow.

    – tao

    31 de diciembre de 2017 a las 13:34

avatar de usuario
holamundopaz

Verifique el código a continuación que está inspirado en este enlace: ¿Cómo agrego un ícono de Font Awesome al campo de entrada?

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

Editar: 23/07/2020 Recientemente visité esta pregunta nuevamente y quería agregar una solución alternativa. Básicamente, copié el código de la barra de búsqueda de Google y le agregué mis propios ajustes. De izquierda a derecha, la barra de búsqueda consta de una etiqueta, una entrada y un botón.

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>

  • ¡Gracias por su sugerencia! Ahora modifiqué esta publicación y marqué tu respuesta como la mejor.

    – Magia visual

    31 de diciembre de 2017 a las 11:11

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad