Icon in bootstrap 4 inside the input - html

Question

I am looking for a solution to create and input like this one in bootstrap 4
I am using font awesome and this is the code that I use
<div class="input-group">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" />
<span>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</span>
</div>
but i get the image out of the input
Any help please
https://jsfiddle.net/5db2ho62/

Answer 1

here is the solution
span{
position: absolute;
margin-left: 5px;
height: 25px;
display: flex;
align-items: center;
}
input{
padding-left: 25px;
height: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
<span>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder="Username" />
</div>
here is the working fiddle

Answer 2

.main {
width: 50%;
margin: 50px auto;
}
.form-group .form-control {
padding-left: 2.375rem;
}
.form-group .form-control-icon {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
<link id="bootstrap-css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="main">
<div class="form-group">
<span class="fa fa-search form-control-icon"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
Try it!

Answer 3

You don't need to have the icon inside the input- you can place it next to the input field, and remove the input field's border using CSS.
HTML:
<div class="input-group">
<i class="fa fa-user-circle-o"></i>
<input type="text" class="form-control" placeholder="Enter Name Here" >
</div>
CSS:
input{
border:none;
background-color: transparent;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.fa-user-circle-o{
color: gray;
}
Updated fiddle:
https://jsfiddle.net/5db2ho62/2/

Answer 4

This method seems to be the cleanest. You do not need to add any custom CSS. You can do the following all with Bootstrap:
$(document).ready(function() {
$('.input-focus').on('click', function() {
$(this).children('input').focus();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="input-group input-focus">
<div class="input-group-prepend">
<span class="input-group-text bg-white"><i class="fa fa-search"></i></span>
</div>
<input type="search" placeholder="Search" class="form-control border-left-0">
</div>
See the bootstrap 4 documentation for more details on how you can manipulate the placement and styling of the input icon:
https://getbootstrap.com/docs/4.0/components/input-group/
UPDATE:
I added a small jQuery snippet to focus the input when the search icon is clicked, per a suggestion to this answer in the comments. The JavaScript snippet and jQuery library script inclusion are not requirements for the icon to appear and work properly, but they do help with UX.

Answer 5

The solution is maybe to use unicode in placeholder.
Here the cheatsheet for all font awesome unicode http://fontawesome.io/cheatsheet/
input {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder=" Username" />
</div>

Answer 6

Use the following code no CSS required.
<div class="d-flex align-items-center small">
<i class="fa fa-search fa-fw text-muted position-absolute pl-3"></i>
<input type="text" class="form-control py-4" placeholder="Search..." style="padding-left: 38px;"/>
</div>

Answer 7

Tested with Bootstrap 4.
Take a form-control, and add is-valid to its class. Notice how the control turns green, but more importantly, notice the checkmark icon on the right of the control? This is what we want!
Example:
.my-icon {
padding-right: calc(1.5em + .75rem);
background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-5">
<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
</div>
</div>

Answer 8

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 " crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js " integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="col-sm-4 input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-search"></i>
</div>
</div>
<input type="text" class="form-control">
</div>
</body>

Answer 9

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
.input-field:focus {
border: 2px solid dodgerblue;
}
/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form action="/action_page.php" style="max-width:500px;margin:auto">
<h2>Register Form</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Email" name="email">
</div>
<div class="input-container">
<i class="fa fa-key icon"></i>
<input class="input-field" type="password" placeholder="Password" name="psw">
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
see bootstrap From
Hope this will help.

Answer 10

You don't need to type custom CSS code. Works great on Bootstrap 5. Don't forget to add font-awesome.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
...
<div class="input-group">
<span class="input-group-text fa fa-user-circle-o form-control-icon"></span>
<input type="text" name="name" class="form-control">
</div>

Answer 11

Putting the icon inside the text area isn't a nice solution to this. The best way is to create a simple workaround. So first we'll create a form with the icon before the input field like below:
input {
border: none;
background-color: white;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="input-group">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Please enter your name" >
</div>
See jsfiddle
Next up with some styling we'll make some changes so that it looks like it's one input field:
input {
border: none;
background-color: transparent;
}
.fa-user {
padding: 10px;
}
.input-group {
border: 1px solid black;
width: 250px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="input-group">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Please enter your name" >
</div>
see jsfiddle
Hope this helps!

Answer 12

Here is the easiest method
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 " crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js " integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="col-sm-4 input-group">
<div class="input-group-prepend">
<div class="input-group-text" style="border-right:none;background:transparent">
<i class="fa fa-user"></i>
</div>
</div>
<input type="text" class="form-control" style="border-left:none">
</div>
</body>