Question

即使屏幕尺寸发生变化，我也希望搜索图标位于文本框内。这是我的HTML代码：----

<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上使用Bootstrap BS Inputs或Padding，如果你直接使用CSS，它可能无法在RESPONSIVE模式下正常工作，但Bootstrap为此提供了有效的解决方案

Answer 2

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

Answer 3

我正在使用这个，可能是最简单的解决方案（对我而言）：

<强> 实施例

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>

如何修复我的搜索图标？

3 个答案: