如何将搜索图标放在搜索栏中

在很多网站或应用程序中，常常会有搜索栏和搜索图标。那么如何将搜索图标放在搜索栏中呢？下面将介绍一些实现方法。

方法一：使用HTML和CSS

我们可以使用HTML和CSS来实现将搜索图标放在搜索栏中。首先，在HTML中添加搜索栏和搜索图标的代码：

<div class="search-container">
  <form action="/search">
    <input type="text" placeholder="Search..." name="search">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

其中，<input>元素定义了搜索栏，<i>元素定义了搜索图标，<button>元素定义了搜索按钮。

现在，我们需要使用CSS来使搜索图标居中在搜索栏中。这可以通过设置<button>元素的vertical-align属性为middle来实现：

.search-container button {
  vertical-align: middle;
}

最后，我们需要引入Font Awesome图标库，以使用搜索图标。可以通过以下方式引入：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

现在，我们已经成功将搜索图标放在搜索栏中了。

方法二：使用框架

如果您正在使用UI框架，例如Bootstrap或Materialize，将搜索图标放在搜索栏中也很容易。这些框架提供了内置的搜索栏组件，只需在代码中使用即可。

Bootstrap

Bootstrap的搜索栏组件如下所示：

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

Materialize

Materialize的搜索栏组件如下所示：

<nav>
  <div class="nav-wrapper">
    <form>
      <div class="input-field">
        <input id="search" type="search" required>
        <label class="label-icon" for="search"><i class="material-icons">search</i></label>
        <i class="material-icons">close</i>
      </div>
    </form>
  </div>
</nav>

总结

无论您使用哪种方法，将搜索图标放在搜索栏中都非常简单。如果您是从头开始构建网站或应用程序，则可以使用方法一。如果您正在使用UI框架，则可以使用方法二。无论如何，这些方法都将使您的搜索栏更加美观和易于使用。