右側に入力内にブートストラップアイコンを追加

Question

私はブートストラップで作業を始めています。次のことをする必要があります。右に2つのアイコンを一緒に追加したいという入力があります。 'div'が、私はダウンしています。css NIデザインではあまりよくありません。どうすればいいか教えてください。

<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

.input-groupクラスは、「ヘルプとして、アイコン、テキストやフロントやその背後にあるボタンを追加することにより、入力を強化するための容器であり、この

<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

をお試しくださいテキスト"。

.input-group-addonクラスは、アイコンまたはヘルプテキストを入力フィールドの横に付けます。より多くの情報については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>

別の解決策は、右側にあるアイコンを整列するCSSプロパティposition & rightの組み合わせを使用することができます。 topを使用して上から揃えます。右にpaddingを追加して入力します。

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