Ajouter une icône bootstrap dans l'entrée à droite

Question

Je commence à travailler avec bootstrap et je dois faire ce qui suit: J'ai une entrée à laquelle je veux ajouter deux icônes ensemble sur le côté droit, pour le moment les regrouper en un 'div', mais je descends, je ne suis pas très bon avec css ni design donc ce serait très utile de me dire comment je devrais le faire.

<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

Essayez cette

<div class='input-group form-group'> 
<label class='input-group-addon'><i class='fa fa-check-circle fa-2x'></i></label> 
<label class='input-group-addon'><i class='fa fa-times-circle fa-2x'></i></label> 
<input type="text" value="" class="form-control"/> 
</div> 

Answer 2

La classe .input-group est un récipient pour améliorer une entrée en ajoutant une icône, un texte ou un bouton devant ou derrière comme une « aide texte".

La classe .input-group-addon attache une icône ou un texte d'aide à côté du champ de saisie.

Pour plus d'informations 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>

Une autre solution, vous pouvez utiliser la combinaison de la propriété css position & right pour aligner l'icône sur le côté droit. Utilisez top pour l'aligner par le haut. Ajouter à droite padding pour entrer.

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