検索アイコンを修正する方法は？

Question

画面サイズが変更されても検索アイコンをテキストボックス内に表示したい。あなたはCSSを使用している場合----

<div class="row" id="about_search"> 
    <div class="col-md-6"></div> 
    <div id="searchCol_a" class="col-md-6" style="padding-top:10px!important;"> 
    <input class="form-control header-searchbar_a form-control-md width-220 pull-right" id="header-search_a" type="text" placeholder="Crazy about your career, search it..."> 
     <span class="icon"> 
      <i id="faSearch_a" class="fa fa-search" style="position: absolute"></i> 
     </span> 
    </div> 
</div> 

Answer 1

SPANにブートストラップBS Inputsやパディングを使用して試してみてください、直接使うのは多分応答性モードでは正常に動作していないが、ブートストラップは、この

のための有効なソリューションを提供します：ここに は私のhtmlコードです（私にとっては）

Answer 2

私はこれを使用してい

、おそらく最も簡単な解決策：

例

label { 
 
    position: relative; 
 
} 
 

 
.fa-search { 
 
    top: 2px; 
 
    left: 5px; /* for left side */ 
 
    /* right: 5px; for right side*/ 
 
    position: absolute; 
 
} 
 

 
#search { 
 
    padding-left: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<label for="search"> 
 
    <i class="fa fa-search"></i> 
 
    <input type="search" id="search" placeholder="search..." /> 
 
</label>

Answer 3

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); 
.search { position: relative; } 
.search input { text-indent: 30px;} 
.search .fa-search { 
    position: absolute; 
    top: 2px; 
    left: 4px; 
    font-size: 15px; 
} 

<div class="search"> 
    <span class="fa fa-search"></span> 
    <input placeholder="Search term"/> 
</div>