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中为按钮添加图标的不同方法。使用字体库是为你的按钮添加图标的一种快速而简单的方法，并提供了广泛的选择。另一方面，使用图像文件可以给你更多的灵活性，允许你使用自定义图标或字体库中没有的图标。无论你选择哪种方法，在你的按钮上添加图标可以大大增强你的网页的视觉吸引力和实用性。