Good afternoon I have the following html code, I'm using 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>
What I want to do is place icons inside the text box, but I could not solve this, how could I do it?
To add icons in bootstrap 4 , include the Font Awesome reference (either locally, or use the CDN).
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Note: If you are performing a previous / subsequent migration to the current one, perform a search and replace this
"glyphicon glyphicon-"and replace it with"fa fa-". Most class namesCSSof the icons are the same. However, some have changed, so you must manually fix them.
Or if you still want to use the Glyphicons icons. The glyphicons.less file of Bootstrap 3 is available at GitHub .
Then you need the following variables:
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
Now I would like to convert the file .less into a file .css and then use it directly. The migration .less to .css we can make use of the following online tool less2css.org , of great utility. And so we will get the following result , save the file as glyphicons.css and ready you can include it in your files HTML .
<link href="/Content/glyphicons.css" rel="stylesheet" />
You also need the Glyphicon fonts that are in the Bootstrap 3 package, place them in the /% directory% co.
Now you can continue using
/ fonts /in Bootstrap 4 as usual.
Current example Bootstrap version 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>More migration reference in the following source.
Good friend I hope this is what you are looking for greetings is only css without using bootstrap
Answer with the help of 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>