Icon in bootstrap 4 inside the input

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


    Username

but i get the image out of the input Any help please https://jsfiddle.net/5db2ho62/

user_10247965 · Answer

.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;
}

Try it!

user_1258617 · Answer

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();
  });
});

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.

user_4094987 · Answer

Use the following code no CSS required.

user_7550622 · Answer

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);
}

user_6504235 · Answer

Admin · Answer







  Register Form

see bootstrap From

Hope this will help.

user_13547109 · Answer

Here is the easiest method

Icon in bootstrap 4 inside the input

11 Answers