0

No logro que mi icono se guarde dentro del input no sé si será en las propiedades

Suscripcion a boletines

Suscribete a nuestras noticias

Correo:

Celular

Suscribir

codigo ccs

.

form-control {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

.form-control {
  padding-left: 30px!important;
}

.header {
    color: #36A0FF;
    font-size: 27px;
    padding: 10px;
}

.bigicon {
    font-size: 35px;
    color: #36A0FF;
}

tambien queria saber si alguien me puede decir como hacer para centrar y colocar mi formulario de una tamaño especifico?

2
  • Deberías compartir un poco mas el código para saber que has hecho y poder ayudarte Commented el 9 mar. 2019 a las 15:12
  • Añade más código
    – qwerty
    Commented el 9 mar. 2019 a las 15:26

1 respuesta 1

1

Me parece que estás forzando un poquito las cosas usando los estilos personalizados. Bootstrap te da básicamente todo lo que pudieras necesitar para lograr un diseño limpio y bien organizado.

Lamentablemente no has agregado suficiente código para saber exactamente lo que estás haciendo. Por lo tanto, y de acuerdo al código que has subido, esta sería una forma de obtener un resultado (espero que sea el deseado) que hará ver tu diseño bastante bien.

PROBLEMA

Se desea crear un campo tipo input que contenga un ícono de usuario. Además se desea que el campo se encuentre centrado en el contenedor.

SOLUCIÓN

Para obtener el resultado deseado usaremos el framework de Bootstrap v.4.3, y el icono SVG lo obtendremos del framwork Font Awesome v5.7.

Usaremos los siguientes estilos de Bootstrap:

  1. container-fluid
  2. form-group
  3. row
  4. justify-content-center
  5. mt-4
  6. col-md-4 col-6
  7. input-group
  8. flex-nowrap
  9. input-group-prepend
  10. input-group-text
  11. form-control

Algo para destacar, en tu código veo que usas las clases col-md-1 col-md-offset-2 y col-md-8, sin embargo están huérfanas, o no has incluido en tu código el contenedor tipo row. La documentación de Bootstrap - Grid Layout establece lo siguiente: (traducción propia)

  • Las Filas son empaques o envoltorios para Columnas. Cada columna tiene un padding horizontal (conocido como gutter) para controlar el espacio entre las mismas....
  • En un esquema de rejilla (grid layout), el contenido debe colocarse dentro de columnas, y sólo elementos de columna pueden ser hijos inmediatos de elementos fila.

Dicho esto, debes siempre usar un contenedor tipo row para usar los contenedores tipo col, los cuales serán siempre los hijos directos del contenedor row.

Por último el código que hace que todo funcione es el siguiente, has de notar que no uso ningún estilo css distinto del que me proporciona Bootstrap.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
    <div class="form-group">
      <div class="row justify-content-center mt-4">
        <div class="col-6 col-md-4">
          <div class="input-group flex-nowrap">
            <div class="input-group-prepend">
              <span class="input-group-text" id="addon-wrapping"><i class="fa fa-user bigicon"></i></span>
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
          </div>
        </div>
      </div>
    </div>
  </div>

Como puedes apreciar en el código, todo tiene un orden y con las clases de Bootstrap las cosas se ven bastante bien.

Puede leer más en Bootstrap - Input Group, para que veas las posibilidades que ofrece.

Espero que esto sea lo que buscabas.

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.