Agregar icono fa en una caja de texto – bootstrap

Pregunta:


Buena tarde tengo el siguiente codigo html, estoy usando bootstrap 4

<div class="form-group has-feedback">
<span class="fa fa-user form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Escribe un nombre">
</div>

Lo que quiero hacer es colocar iconos adentro de la caja de texto, pero no he podido solucionar esto, como lo podría hacer??

Preguntado por:

IniDesing.com

Para añadir iconos en bootstrap 4, incluya la referencia de Font Awesome (ya sea localmente, o use el CDN).

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

Nota: Si estás realizando una migración anterior/posterior por la actual, realice una búsqueda y reemplace esto "glyphicon glyphicon-" y reemplácelo por "fa fa-". La mayoría de los nombres de las clase CSS de los iconos son iguales. Sin embargo, algunos han cambiado, por lo que debes corregirlos manualmente.

O si aún desean utilizar los iconos de Glyphicons. El archivo glyphicons.less de Bootstrap 3 está disponible en GitHub.

Luego se necesitan de las siguientes variables:

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";
@icon-font-svg-id:        "glyphicons_halflingsregular";

Ahora tocaría convertir el archivo .less en un archivo .css para luego así usarlo directamente. La migración .less a .css podemos hacer uso de la siguiente herramienta en línea less2css.org, de gran utiidad. Y así obtendremos el siguiente resultado, guárde el archivo como glyphicons.css y listo ya lo puede incluir en sus archivos HTML.

<link href="/Content/glyphicons.css" rel="stylesheet" />

También se necesitan las fuentes Glyphicon que se encuentran en el paquete Bootstrap 3, coloquelas en el/un directorio / fonts /.

Ahora puedes seguir usando Glyphicons en Bootstrap 4 como de costumbre.

Ejemplo actual versión Bootstrap 4

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

.form-control {
  padding-left: 30px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group has-feedback">
  <i class="fa fa-user form-control-feedback"></i>
  <input type="text" class="form-control" placeholder="Escribe un nombre">
</div>

Más referencia de migración en la siguiente fuente.

Buenas amigo espero esto sea lo que buscas saludos es solo css sin usar bootstrap

Respuesta con la ayuda de gugadev

@import "https://fonts.googleapis.com/css?family=Lato:400,700";
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 1rem;
}

#search-wrapper {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-flow: row-reverse nowrap;
      -ms-flex-flow: row-reverse nowrap;
          flex-flow: row-reverse nowrap;
  width: 350px;
}
#search-wrapper #search {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-left: 0;
  border-radius: 0 25px 25px 0;
  color: #444;
  padding: .6rem .5rem;
  font-family: 'Lato';
  font-size: 15px;
  font-weight: lighter;
  -webkit-transition: border-color .2s ease;
  transition: border-color .2s ease;
  width: 100%;
}
#search-wrapper #search + i {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 25px 0 0 25px;
  border-right: 0;
  color: #777;
  padding: .67rem .65rem;
  -webkit-transition: border-color .2s ease;
  transition: border-color .2s ease;
}
#search-wrapper #search:focus {
  border-color: #999;
  outline: none;
}
#search-wrapper #search:focus + i {
  border-color: #999;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div id="search-wrapper">
  <input 
         type="search" 
         id="search" 
         placeholder="Buscar"
   />
  <i class="fa fa-search"></i>
</div>

Fuente

Related Posts:

¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
No funciona JQuery en un archivo js – javascript jquery html
Pregunta: Mi problema es que no puedo usar jquery en mis archivos js, apesar que ya esta integrado en html e incluso funciona con bootstrap. Trate ...
¿Como puedo alinear verticalmente un contenido de un div con bootstrap 3? – html css bootstrap
Pregunta: Si observan el ejemplo en una resolución de 1024p podrán observar como el texto del label se extiende y el select pegado a la ...
contar sabado y domingo en un rango de fechas con datapicker – javascript bootstrap
Pregunta: Como puedo saber cuandos sabados y domingos hay en un rango de fechas 01-01-2017 & 20-01-2017 (por ejemplo), sabiendo que datapicker (bootstrap) tiene un arreglo ...
Abro un form modal en ASP.NET MVC y aparece como inactivo – asp.net bootstrap mvc
Pregunta: Buenas noches tengo una pequeña duda, estoy abriendo un form modal y cuando presiono el boton que lo abre sale como si el form modal ...
Modal no aparece completo – css bootstrap modal
Pregunta: Así aparece mi Modal: Necesito que me aparezca completo y se superponga por delante de todo. Este es mi código: <div class="row"> ...
Como cargar correctamente Jquery y Bootstrap – jquery bootstrap
Pregunta: Buenos dias a todos, estoy haciendo una web que hace uso de JQuery y de Bootstrap (incluido algunos plugins como DateTimePicker). Mas o menos ...
Ayuda con el diseño de un DIV en HTML y Bootstrap – html bootstrap
Pregunta: Vengo diseñando la parte estática de mi sistema (la pagina web), pero estoy obteniendo un pequeño error a la hora de diseñar un div, Lo ...
¿Cómo usar JS en html? – javascript html bootstrap
Pregunta: Estoy haciendo un proyecto web en netbeans con jsp y nos pidieron darle diseño por lo que estoy usando bootstrap, entiendo como usar el ...
¿Se puede poner texto a un input type radio? – html css bootstrap
Pregunta: Esta pregunta ya tiene una respuesta aquí: ...
¿Cómo cambiar background-color de un tab / pill / nav con clase .active en bootstrap 4? – bootstrap bootstrap-4
Pregunta: Si ejecuta el siguiente script verá que por defecto el tab / pill / nav activo tiene clase .active y por tanto el color ...
Problema con collapse en bootstrap – bootstrap
Pregunta: <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, ...
Como enviar correos desde codeigniter con phpmailer? – php javascript bootstrap
Pregunta: Hola buenos dias veran soy muy nuevo en esto y recientemente me encargaron la tarea de mandar correos. Tengo que crear un formulario que ...
Validar rango de entrada y salida de reserva. Bootstrap datepicker – jquery bootstrap formularios
Pregunta: mi problema es algo básico. Tengo un sistema de reserva donde ingresan la fecha de entrada y salida. Tengo validado que la fecha de ...
Bootstrap – datetimepicker inline no funciona – javascript jquery html5
Pregunta: Necesito visualizar el calendario en forma inline, asi: Este es el codigo que tengo: <div style="overflow:hidden;"> <div class="form-group"> ...

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *