在本文中，我们将向您展示如何向 HTML 中的按钮添加图标。图标是增加视觉吸引力和增强按钮可用性的好方法。它们可用于指示按钮将执行的操作类型或使用户更容易理解按钮的功能。
在HTML中，有几种方法可以将图标添加到按钮中，本文将介绍其中两种最流行的方法−
使用字体库
使用图像文件。
在HTML中为按钮添加图标的一种方法是使用字体库。字体库是一组可伸缩的矢量图标，可以通过CSS轻松地自定义和样式化。最流行的字体库是Font Awesome和Ionicons。
第 1 步 - 在 HTML 文件中包含字体库的 CSS 文件。
下面是一个演示相同内容的示例 -< /p>
<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>
第四步 - 下面是完整的代码（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>标签中。这将在按钮内显示右箭头图标。
在HTML中，另一种向按钮添加图标的方法是使用图像文件。如果您想使用自定义图标或者所需图标在字体库中不可用，这种方法非常有用。
这是一个演示相同内容的示例 -
第一步 - 创建或下载您想要使用的图标的图像文件。
在这里，我们使用一个免费的图标网站下载图标。
第 2 步 - 通过在文件资源管理器中导航和拖放，将图像文件添加到项目的目录中。
步骤 3 - 在您想要添加图标的地方添加html按钮元素。
<button class="icon-button"> Next </button>
第四步 - 在按钮的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;
}
Step 6 − Here is the complete code to implement the same −
<!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 属性（例如背景大小和背景位置）调整图标的大小和位置。
在本文中，我们向您展示了两种在 HTML 中向按钮添加图标的不同方法。使用字体库是向按钮添加图标的一种快速、简单的方法，并提供了广泛的选项。另一方面，使用图像文件为您提供了更大的灵活性，并允许您使用自定义图标或字体库中不可用的图标。无论您选择哪种方法，向按钮添加图标都可以极大地增强网页的视觉吸引力和可用性。
