如何将 Font Awesome 图标放置在输入字段中?

htmlweb developmentfront end technology更新于 2024/10/17 2:52:17

很多情况下，开发者需要在文本输入框或特定的 HTML 元素中放置图标。例如，我们正在创建一个包含多个输入框的表单。如果我们将与表单输入框相关的图标放置在输入框中，就可以为应用程序创建更好的 UI 和更美观的设计。

在本教程中，我们将使用 Font Awesome 库在网页上添加图标。此外，我们还将操作 CSS 代码将图标放置在输入字段中。

语法

用户可以按照以下语法在输入字段中放置图标。

input { padding-left: 40px; }
i {position: absolute; left: 0; top: 11px; }

在上述语法中，我们设置了输入字段的内边距 (padding)。之后，我们设置了图标的"绝对"位置，并设置了顶部位置。此外，我们还可以根据需求设置图标的内边距 (padding)。

示例 1

在下面的示例中，我们创建了一个 div，其类名为"form"。此外，我们为每个输入框定义了 div 元素，并根据其包含的输入框设置了不同的类名。我们在 div 元素中添加了标签、输入框元素和 Font Awesome 图标。

在 CSS 中，我们设置了输入框元素的父 div 样式。此外，我们将输入框元素的 padding-left 设置为 40px，以便在该位置设置图标。用户可以根据图标大小设置内边距。

之后，我们设置了图标的绝对位置。此外，我们根据输入框元素的位置固定了顶部位置。此外，我们设置了图标的内边距，并添加了 0.3 秒的过渡效果。

用户可以在输出中观察到文本输入字段内的图标。

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .fileExtension, .filename { position: relative; display: flex; flex-direction: column; width: 300px; }
      .fileExtension input, .filename input { padding-left: 40px; }
      .fileExtension i, .filename i { position: absolute; left: 0; top: 11px; padding: 9px 8px; transition: 0.3s; }
   </style>
</head>
<body>
   <h3> Using the <i> CSS to place font Awesome </i> icons inside the input field  </h3>
   <div class="form">
      <div class="filename">
         <label> <b> filename </b> </label>
         <input type="text" placeholder="Enter filename" name="filename" required>
         <i class="fa fa-code"> </i>
      </div>  <br>
      <div class="fileExtension">
         <label> <b> File Extenssion </b> </label>
         <input type="text" placeholder="Enter file extension" name="extension" required>
         <i class="fa fa-code"> </i>
      </div>
   </div>
</html>

示例 2(使用:after伪类)

在此示例中，我们使用":after"伪选择器在输入字段中设置图标。该伪选择器将HTML元素从网页的原始流程中移除，并使其独立。

在这里，我们在div元素内添加了输入元素。在CSS中，我们设置了输入元素的"position:relative"。之后，我们使用":after"伪选择器将图标放置在输入元素之后。我们使用CSS的特定代码和"content"属性将图标添加到输入元素之后。此外，我们在将"position"属性设置为"absolute"值后，设置了图标的正确位置。

在输出中，我们可以看到图标位于输入字段的右侧。

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .input {
         display: inline-block;
         position: relative;
      }
      .input:after {
         position: absolute;
         right: 6px;
         font-family: 'FontAwesome';
         content: '\f274';
      }
   </style>
</head>
<body>
   <h3> Using the <i> CSS to place font Awesome </i> icons inside the input field </h3>
   <div class="input">
      <input type="text" placeholder="Enter date" />
   </div>
</html>

示例 3

在下面的示例中，我们在 HTML 中将图标添加到输入框上方的"span"中。在 CSS 中，我们设置了输入元素的左内边距 (padding)。此外，我们还设置了图标元素的绝对位置。之后，我们更改了图标元素的位置，以便将其放置在输入元素内部。

用户可以在输出中看到，我们在输入元素内部添加了错误图标。

<html>
<head>
   <link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      #input {
         padding-left: 35px;
      }
      /* placing the icon */
      .error {
         position: absolute;
         margin-top: 1.5px;
         margin-left: 5px;
         font-size: 20px;
         color: red;
      }
   </style>
</head>
<body>
   <h2> Using the <i> CSS to place font Awesome </i> icons inside the input field </h2>
   <span class = "fa fa-info-circle error"> </span>
   <input name = "input" id = "input">
</html>

本教程中，我们学习了如何在输入字段中设置图标。我们可以在用户名输入字段中设置用户图标，在电话号码输入字段中设置呼叫图标，在密码输入字段中设置钥匙图标，在电子邮件输入字段中设置收件箱图标等等。

开发者需要使用"绝对"位置和不同的定位属性来设置输入字段中的位置图标。