0

Hola soy novato y me entro una duda, necesito sus consejos lo que quiero es meter un icono dentro del input, pero la forma en que lo hice no sé si estará bien aquí dejo el trozo de código.

 <div class="cajatexto">  <!-- aqui le puse un position relative-->
            <input type="text" placeholder="search..">   
            <i class="fas fa-search"></i> <!-- le puse un position absolute para dejarlo dentro del input. (al darle zoom a la pantalla el icono se sale del input)-->
        </div>

PD: vi un video que el icono lo metían dentro de un span y ¿por que lo meten dentro de un span? por ejemplo:

<div class="cajatexto"><!-- aqui le puse un position relative-->
            <input type="text" placeholder="search..">   
            <span class="icon"><i class="fas fa-search"></i></span> <!-- le puse un position absolute al span con la clase icon para dejarlo dentro del input y al darle zoom a la pantalla ese icono no se mueve del input, lo que quiero saber es ¿por que pasa eso? gracias masters.-->
        </div>
2
  • No puedes ingresar un icono dentro de un input, cada input tiene su función, texto, números, imágenes, etc., etc.., ahora bien lo que tu quieres es poner un icono al lado de una caja de texto, es algo diferente, y con respecto a lo del span, se utiliza ya que es una etiqueta en linea es decir no hace un salto de linea como el <p> y ademas permite asignarle estilos entre otros lo que es de bastante ayuda Commented el 15 nov. 2021 a las 21:49
  • te recomiendo incluir los estilos que agregastes, ya que de la forma en que lo tienes no debería de darte problemas el icono, pero al no ver los estilos no se puede observar que es lo que hace que no funcione correctamente Commented el 15 nov. 2021 a las 21:54

1 respuesta 1

2

técnicamente no es posible meter un icono dentro del input, pero si se puede sobreponer un elemento (el icono), para simular que está dentro

Te daré un ejemplo guiado por lo que tienes:

body{
  background-color: rgba(0, 0, 0, .5);
  min-height: 100vh;
}

/* Este elemento debe tener "position: relative" */
div#is-relative{
  max-width: 420px;
  position: relative;
}

/* El icono debe ser "position: absolute"
 * Ademas le damos un "display: block" y lo posicionamos */
#icon{
  position: absolute;
  display: block;
  bottom: .5rem;
  right: 1rem;
  
  user-select: none;
  cursor: pointer;
}
input.input{
  padding-right: 2.5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" rel="stylesheet"/>

<div class="columns">
  <div class="column p-5">

    <div id="is-relative">
      <input type="password" class="input">
      <span id="icon">
        <i class="fas fa-key"></i>
      </span>
    </div>

  </div>
</div>

Debes prestarle atención acá es al modo en que posiciono los elementos, el contenedor tiene que ser relative, para limitar los posicionados dentro de él.

Y el icono debe ser absolute para poder ubicarlo donde mejor nos parezca y así superponerlo.

He usado la librería bulma CSS solo para embellecer esto un poco más, pero tu fácilmente puedes adaptarlo a lo que tienes

1
  • Y si quisieras el icono al principio? que harias con el placeholder? Commented el 8 mar. 2022 a las 21:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.