添加图标到输入 - Html (1)

📌 相关文章

📜 添加图标到输入 - Html (1)

📅 最后修改于: 2023-12-03 15:40:46.523000 🧑 作者: Mango

添加图标到输入 - HTML

在 HTML 中，我们可以轻松地添加图标到输入框中，以使用户更轻松地识别输入框的内容。本文将介绍如何在输入框中添加图标。

步骤

1. 在 HTML 文件中添加一个图标库

我们可以使用 Font Awesome 或 Bootstrap 等图标库来添加图标。要包含 Font Awesome，请在 HTML 文件中添加以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-BvFwK/TzkwOyj/gpeQaytrt0d7VQ4fpC0YdRChbAZHs/nKudSyl0TfT7nb0lurCq3MC+v4jP4YXozd/4J/4sVw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. 添加一个输入框

接下来，我们将在 HTML 文件中添加一个输入框。我们可以使用以下代码：

<input type="text" name="text" placeholder="请输入搜索关键字" />

3. 添加图标

为了添加图标，我们需要使用以下代码：

<div class="input-group">
  <input type="text" class="form-control" placeholder="请输入搜索关键字" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
  </div>
</div>

在这个代码片段中，我们可以看到一个 div 元素，其包含一个 input 元素和一个 span 元素。这个 span 元素里包含了一个图标，我们可以修改 i 元素的类名以更改图标。在这个例子中，我们使用了 fas fa-search 类名来使用搜索图标。

4. 运行代码

完成上述步骤之后，我们就可以看到添加图标到输入框的效果了。

结论

在 HTML 中为输入框添加图标只需简单的几个步骤。以下是完整的代码片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加图标到输入 - HTML</title>
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-BvFwK/TzkwOyj/gpeQaytrt0d7VQ4fpC0YdRChbAZHs/nKudSyl0TfT7nb0lurCq3MC+v4jP4YXozd/4J/4sVw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="请输入搜索关键字" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
      </div>
    </div>
  </body>
</html>

运行结果见下图：

输入框中添加图标的效果