📌  相关文章
📜  如何将 Font Awesome 图标放置到输入字段？(1)

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

如何将 Font Awesome 图标放置到输入字段？

Font Awesome 是一款流行的开源图标字体库，它包含了数千个图标，可以用于各种 Web 开发项目中。在输入字段中使用 Font Awesome 图标可以为用户提供更好的交互体验，本文将介绍如何将 Font Awesome 图标放置到输入字段中。

步骤

  1. 在 HTML 文件中引入 Font Awesome 样式文件和 jQuery 库。

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-2NlzpypsCuqvnxgNyvsBP+ANzaWzZMvELc78ifjZCtXsSQeT8TmDLxJLRbpjwFbZYpWtPnELtIIcIifTDsXtKQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-H+K7aLz2AJZvK+pFqr+mN9XU6+FUWIMyRRPx0C4Ke7V+RF6FFaWZ+DYzwZMh+7OaTMud+bKjyLXLfJciSHB+Mw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  2. 创建输入字段，并为其指定一个 ID。

    <input type="text" id="myInput" />

  3. 使用 jQuery 在输入字段中添加 Font Awesome 图标。

    $(document).ready(function() {
  $('#myInput').before('<i class="fas fa-search"></i>');
});

说明：

  • 输入字段的 ID 为 myInput。
  • Font Awesome 图标的 class 为 fas fa-search。可以根据需求选择不同的图标及其 class。
效果展示

给出一个例子，展示了如何将一个 Font Awesome 搜索图标放置到输入字段中。可通过复制以下代码到 HTML 文件中进行实验。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Font Awesome 输入字段</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-2NlzpypsCuqvnxgNyvsBP+ANzaWzZMvELc78ifjZCtXsSQeT8TmDLxJLRbpjwFbZYpWtPnELtIIcIifTDsXtKQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-H+K7aLz2AJZvK+pFqr+mN9XU6+FUWIMyRRPx0C4Ke7V+RF6FFaWZ+DYzwZMh+7OaTMud+bKjyLXLfJciSHB+Mw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
  <body>
    <div>
      <input type="text" id="myInput" />
    </div>
    <script>
      $(document).ready(function() {
        $('#myInput').before('<i class="fas fa-search"></i>');
      });
    </script>
  </body>
</html>

效果如下：

Font Awesome 输入字段效果展示

通过上述步骤，您已经可以将 Font Awesome 图标放置到输入字段中。