搜索字段问题：无法正确插入搜索字段与搜索字体真棒徽标

Question

我正在做一个房地产网站项目。我已经创建了 Photoshop 模板并将其上传到 Behance。 https://www.behance.net/csc103falld848

现在，我正在创建房地产商店模板的静态版本。我面临一个问题。我无法将搜索字段与 Search font awesome 徽标并排插入。我已尽力修复它。请看一下屏幕截图以了解问题： https://drive.google.com/open?id=1-wqJu9K6QtG1tzK_MiEuGAuveZ_-KKaK

#search-rectangle {
  width: 50px;
  height: 40px;
  background-color: #0054a6;
}

#search-here-rectangle {
  width: 110px;
  height: 40px;
  background-color: #00aeef;
}

#search-field {
  width: 110px;
  height: 40px;
  background-color: #00aeef;
}

<div id="rectangle">

  <div class="col-sm-4 search-rectangle" id="search-rectangle">
    <i id="search" class="fa fa-search"></i>
  </div>

  <div class="col-sm-8" id="search-here-rectangle">
    <input id="search-field" type="text" name="Search Here" value="Search Here" size="20">
  </div>

</div>

这里是 CodePen.io 链接： https://codepen.io/kanan292/pen/rrpegK

期待您提供出色的解决方案。

Answer 1

给你..用你想要的图标更改“GO”文本。

.input-group .btn {
  background-color: #0054a6;
  padding: 10px 12px;
  border: 0 none;
  color: #fff;
}

#search-field {
  width: 110px;
  background-color: #00aeef;
  color: #fff;
  height: 40px;
  border: 0 none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="
    margin-top: 20px;
">

  <div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" style="background-color: #0054a6;">Go!</button>
      </span>
    <input type="text" class="form-control" placeholder="Search for..." id="search-field" name="Search Here" value="Search Here">
  </div>

</div>