pic Estoy tratando de mover mis iconos de fuente al lado del formulario de contacto, en lugar de en la parte superior del formulario, por favor, vea la foto.

¿Me puede decir cómo podría cambiar también el largo / ancho del formulario? Siento que es demasiado largo. Aquí está mi código.

.container {
  margin-left: 15em;
}

.bigicon {
  font-size: 35px;
  color: #FFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>

            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
              <div class="col-md-8">
                <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
              <div class="col-md-8">
                <input id="email" name="email" type="text" placeholder="Email" class="form-control">
              </div>
            </div>

            <div class="form-group">
              <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
              <div class="col-md-8">
                <textarea class="form-control" id="message" name="message" placeholder="Message" rows="7"></textarea>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>
1
Alexandra 16 ene. 2018 a las 06:11

3 respuestas

La mejor respuesta

Prueba este fragmento. He agregado los iconos dentro del marcador de posición.

.container {
  margin-left: 15em;
}

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

.input-icon {
  position: absolute;
  left: 1rem;
  top: calc(50% - 0.5em);
  /* Keep icon in center of input, regardless of the input height */
}

input {
  padding-left: 17px;
}

.form-control {
  text-indent: 1.2rem;
}

.input-wrapper {
  position: relative;
}
<link href="https://bootswatch.com/4/cyborg/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="well well-sm">
        <form class="form-horizontal" method="post">
          <fieldset>

            <div class="form-group">
              <div class="col-md-8">
                <div class="input-wrapper">
                  <input id="fname" name="name" placeholder="Name" type="text" class="form-control">
                  <label for="fname" class="fa fa-user input-icon bigicon"></label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">
                  <input id="email" name="email" type="text" placeholder="Email" class="form-control">
                  <label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-8">

                <div class="input-wrapper">
                  <textarea class="form-control" id="message" name="message" placeholder="Message" rows="1"></textarea>
                  <label for="message" class="fa fa-pencil-square-o input-icon bigicon"></label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg">Submit</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>
1
Lakindu Gunasekara 16 ene. 2018 a las 05:21

Necesita la clase row para usar col-*

<div class="row form-group">

Reemplazar

<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>

Con

<div class="col-md-auto"><i class="fa fa-user bigicon"></i></div>

Juega aquí

Solución mínima

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
                        <div class="row align-items-center">
                            <div class="col-auto"><i class="fa fa-user bigicon"></i></div>
                            <div class="col">
                                <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
                            </div>
                        </div>
</div>

También puedes probar el grupo de entrada ingrese la descripción de la imagen aquí

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="well well-sm">
                <form class="form-horizontal" method="post">
                    <fieldset>


                        <div class="row align-items-center no-gutters">
                            
                            <div class="col-md-8">
                              <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-user bigicon"></i></span>
                                  </div>
                                  <input id="fname" name="name" type="text" placeholder="Name" class="form-control">
                                </div>

                                
                            </div>
                        </div>
                        
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
3
kiranvj 16 ene. 2018 a las 04:53

Ha pasado un tiempo desde que trabajé con Bootstrap, pero supongo que debes convertir <span></span> en <div></div> para que BootStrap pueda manejar el posicionamiento correctamente.

-1
cptully 16 ene. 2018 a las 03:18