HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何在 HTML 按钮中添加图标?

htmlcssweb developmentfront end technology更新于 2024/11/19 18:20:17

简介

本文将向您展示如何在 HTML 按钮中添加图标。图标是提升按钮视觉吸引力和可用性的绝佳方式。它们可用于指示按钮将执行的操作类型，或使用户更容易理解按钮的功能。

方法

在 HTML 按钮中添加图标的方法有很多种，本文将介绍两种最常用的方法 -

  • 使用字体库

  • 使用图像文件。

方法 1:使用字体库

在 HTML 按钮中添加图标的一种方法是使用字体库。字体库是可缩放矢量图标的集合，可以使用 CSS 轻松自定义和设置样式。最流行的字体库是 Font Awesome 和 Ionicons。

步骤 1 − 将字体库的 CSS 文件添加到 HTML 文件中。

示例

以下示例演示了相同的操作 −

<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
   <style>
      button {
         padding: 10px;
         font-size: 1em;
      }
   </style>
</head>

步骤 2 − 使用与您想要使用的图标对应的类。例如，在 Font Awesome 中，您可以使用类"fa fa-icon-name"来添加图标。

这里，我们添加向右箭头图标 −

<i class="fa fa-arrow-right"></i>

步骤 3 − 将类添加到按钮的 HTML 代码中。

<button>
   <i class="fa fa-arrow-right"></i> Next
</button>

步骤 4 − 完整代码如下(index.html 文件)−

示例

这里有一个示例来演示同样的操作 −

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
   <style>
      button {
         padding: 10px;
         font-size: 1em;
      }
   </style>
</head>
<body>
   <h1> Welcome to tutorials point</h1>
   <button>
      <i class="fa fa-arrow-right"></i> Next
   </button>
</body>
</html>

以上代码使用 Font Awesome 库为按钮添加图标。第一步是在 HTML 文件中引用字体库的 CSS 文件。在本例中，我们使用 Font Awesome 的 CDN 链接。接下来，我们为想要使用的图标添加合适的类名，在本例中，我们使用"fa fa-arrow-right"来表示向右箭头图标。然后，我们将这个类名添加到按钮的 HTML 代码中，并包裹在 <i> 标签中。这样就会在按钮内显示向右箭头图标。

方法 2:使用图片文件

另一种在 HTML 中为按钮添加图标的方法是使用图片文件。如果您想使用自定义图标，或者字体库中没有您想要使用的图标，这种方法非常有用。

示例

以下示例演示了相同的操作 -

步骤 1 - 创建或下载您想要使用的图标的图像文件。

在这里，我们使用免费图标网站下载图标。

步骤 2 - 通过在文件资源管理器中导航和拖放操作，将图像文件添加到您的项目目录中。

步骤 3 - 在您想要添加图标的位置添加 HTML 按钮元素。

<button class="icon-button">
   Next
</button>

步骤 4 − 使用按钮 CSS 中的"background-image"属性将图标设置为背景图像。

.icon-button {
   background-image: url(icon.png);
}

步骤 5 − 添加适当的 CSS 来设置图标的位置和大小。

.icon-button {
    background-image: url(icon.png);
    background-repeat: no-repeat;
    background-position: center;
}

步骤 6 − 以下是实现相同功能的完整代码 −

示例

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/all.min.css">
   <style>
      .icon-button {
         background-image: url(icon.png);
         background-repeat: no-repeat;
         background-position: center;
         padding: 12px;
      }
   </style>
</head>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <button class="icon-button">
      <i class="fa fa-arrow-right"></i> Next
   </button>
   <button class="icon-button">
      Next
   </button>
</body>
</html>

在此示例中，第一个按钮使用 Font Awesome 库显示箭头图标，第二个按钮使用图片文件作为图标。您可以使用 CSS 属性(例如 background-size 和 background-position)调整图标的大小和位置。

结论

在本文中，我们向您展示了两种在 HTML 中为按钮添加图标的不同方法。使用字体库是一种快速简便的按钮图标添加方法，并且提供了丰富的选项。另一方面，使用图片文件则提供了更大的灵活性，允许您使用自定义图标或字体库中没有的图标。无论您选择哪种方法，为按钮添加图标都可以极大地提升网页的视觉吸引力和可用性。

相关文章

有用资源

打印 下一节:如何使用 CSS 为同一种字体添加多个字体文件? ❯❮ 上一节:使用 HTML 和 CSS 设计作品集网页