アイコンフォント内のテキスト入力

Question

ブートストラップを使用してプレースホルダテキストを基準にして、左に揃えられ、余白が右側にあるブートストラップ入力タイプのテキストの中にすばらしいアイコンフォントを配置するにはどうすればよいですか？あなたは、ブートストラップを使用していることを行う方法を知っています

：イムは、次のようにやって：https://jsfiddle.net/tbeay2vd/1/、それは動作しますが、私のような入力テキストを持っていると思いブートストラップクラス「入力グループアドオン」を使用して？

HTML：

<div class="container"> 
    <div class="row justify-content-center"> 
    <div class="col col-md-7"> 


     <div class="input-group"> 
     <div class="input-group-addon"><i class="fa fa-search"></i></div> 
     <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search..."> 
     </div> 

    <!-- How to do this input text below using bootstrap ? --> 

     <div class="example"> 
      <i class="fa fa-search"></i> Search.. 
     </div> 


    </div> 
    </div> 
</div> 

Answer 1

これを試してみてください：

$('input').on('focus', function() { 
 
    $(this).parent().addClass('active'); 
 
});

.example { 
 
    margin-top:30px; 
 
    border:1px solid gray; 
 
    border-radius:4px; 
 
    padding:15px; 
 
} 
 
.example >i { 
 
    margin-right:10px; 
 
} 
 
.search-input { 
 
    border: none; 
 
    width: 90%; 
 
} 
 
.search-input:focus{ 
 
    outline: none; 
 
} 
 
.example.active { 
 
border-color: #80bdff; 
 
} 
 
.search-box .input-group-addon { 
 
    background: none; 
 
} 
 
.search-box input { 
 
    border-left: none; 
 
} 
 
.search-box.active .input-group-addon { 
 
    border-color: #80bdff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row justify-content-center"> 
 
    <div class="col col-md-7"> 
 

 
     <div class="input-group search-box"> 
 
     <div class="input-group-addon"><i class="fa fa-search"></i></div> 
 
     <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search..."> 
 
     </div> 
 
    
 
    <!-- Hpw to do this layout using bootstrap ? --> 
 

 
     <div class="example"> 
 
      <i class="fa fa-search"></i> 
 
      <input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search..."> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

.input-group >.fa{ 
 
    position: absolute; 
 
    z-index: 10; 
 
    top: 37%; 
 
    left: 20px; 
 
} 
 
.input-group .form-control{ 
 
    padding-left: 40px; 
 
    height: 60px; 
 
    border: black solid 1px; 
 
    position: relative; 
 
    border-radius: 5px!important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row justify-content-center"> 
 
    <div class="col col-md-7"> 
 
     <div class="input-group"> 
 
     <i class="fa fa-search"></i> 
 
     <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search..."> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>