极客笔记如何在HTML中为按钮添加图标
介绍
在本文中，我们将向您展示如何在HTML中为按钮添加图标。图标是增加按钮的视觉吸引力和增强可用性的一种很好的方式。它们可以用于指示按钮将执行的操作类型，或者使用户更容易理解按钮的功能。
方法
有几种在HTML中为按钮添加图标的方法，本文将介绍其中最流行的两种方法：
- 使用字体库
-
使用图像文件
方法1：使用字体库
一种在HTML中为按钮添加图标的方法是使用字体库。字体库是一组可伸缩的矢量图标，可以使用CSS轻松自定义和样式化。最流行的字体库有Font Awesome和Ionicons。
步骤1 - 在您的HTML文件中引入字体库的CSS文件。
示例
以下是一个示例来演示相同的内容-
<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中向按钮添加图标。使用字体库是一种快速简便的方式，可以为按钮添加图标，并提供了广泛的选项。另一方面，使用图像文件可以为您带来更大的灵活性，使您可以使用自定义图标或字体库中不可用的图标。无论您选择哪种方法，为按钮添加图标都可以极大地增强您网页的视觉吸引力和可用性。