Add bootstrap icon inside input at right side

Question

I'm starting to work with bootstrap and I need to do the following: I have an input which I want to add two icons together on the right side, for the moment grouping them into a 'div', but I'm going down, I'm not very good with css ni design so it would be very helpful to tell me how I should do it.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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="col-lg-4">
<input type='text' value='' class='form-control'><a><i class='fa fa-check-circle fa-2x' aria-hidden='true'></i></a> <a><i class='fa fa-times-circle fa-2x' aria-hidden='true'></i></a>
</div>

Answer 1

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".

The .input-group-addon class attaches an icon or help text next to the input field.

For more info xfer: bootstrap_forms_inputs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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="col-lg-4">
  <div class="input-group">
    <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
    <span class="input-group-addon transparent">
    <i class='fa fa-check-circle fa-lg' aria-hidden='true'></i></span>
    <span class="input-group-addon transparent">
    <i class='fa fa-times-circle fa-lg' aria-hidden='true'></i></span>
  </div>
</div>

Another solution, you can use the combination of css property position & right to align icon at right side. Use top to align from top. Add right padding to input.

.check-icon {
right:50px;
position:absolute;
top:2px;
}

.times-icon {
right:20px;
position:absolute;
top:2px;
}

.icon-input {
padding-right:60px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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="col-lg-4">
<input type='text' value='' class='form-control icon-input'><a><i class='fa fa-check-circle fa-2x check-icon' aria-hidden='true'></i></a> <a><i class='fa fa-times-circle fa-2x times-icon' aria-hidden='true'></i></a>
</div>