在 HTML 中设置图标大小

在本文中，我们将讨论如何在 HTML 中设置图标的大小。

一个图标是代表网页上特定操作的符号。图标字体包含符号和字形。有几个图标库（字体）提供图标，可用于 HTML 网页。

网页开发者经常使用的一些主要的图标字体包括Font Awesome、Bootstrap Glyphicons和Google 的 Material Icons。

  • Font Awesome - 这个库完全免费，可用于商业和个人用途。该字体为我们提供了 519 个免费的可缩放矢量图标。这些图标很容易定制，最初是由 Bootstrap 开发的。

  • Bootstrap Glyphicons - 这是一个单色图标库，提供光栅图像格式、矢量图像格式和字体格式。它以字体格式提供超过 250 个字形。你可以在你的 Web 项目中使用这些字体，但它们不是免费的。

  • Google 的 Material Icons - 有 750 个根据“Material Design 指南”设计的图标，Google 将其作为一个集合提供，这些图标被称为 Material Design 图标。这些图标几乎在所有 Web 浏览器中都受支持。要使用这些图标，你必须加载字体（库）material-icons。

让我们在下面的示例中使用上述图标字体库。

Font Awesome 图标

示例

在下面的示例中：

  • 首先，我们加载了Font Awesome库。

  • 然后我们使用其中一个图标，并将该图标的类名添加到<body>标签内的 HTML 元素中。

  • 然后我们通过使用 CSS 定义其大小并将其与类名一起使用来增加图标的大小。

  • 我们已将大小声明为 100px。

<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   <style>
      i.size {
         font-size: 100px;
      }
   </style>
</head>
<body>
   <h2>This is a Font Awesome Icon</h2>
   <p>We have set the size of this icon to 100px.</p>
   <i class="fa fa-inr size"></i>
</body>
</html>

正如我们在输出中看到的，我们使用了印度货币的图标，并使用 CSS 定义了其大小。

Google Material Icons

示例

在下面的示例中：

  • 我们已加载了 Material Icons 库。

  • 然后我们使用其中一个图标，并将该图标的类名添加到<body>标签内的 HTML 元素中。

  • 我们使用了一个名为traffic的图标，因为它属于操作类别。

  • 然后我们通过使用 CSS 定义其大小并将其与类名一起使用来增加图标的大小。

<!DOCTYPE html>
<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <style>
      i.size {
         font-size: 150px;
      }
   </style>
</head>
<body>
   <h2>This is a Google Material Icon</h2>
   <p>We have set the size of this icon to 150px.</p>
   <i class="material-icons size">traffic</i>
</body>
</html>

正如我们在输出中看到的，我们使用了交通灯的图标，并使用 CSS 定义了其大小。

Bootstrap Glyphicons

示例

在下面的示例中：

  • 首先，我们加载了 Bootstrap Glyphicons 库。

  • 然后我们使用其中一个图标，并将该图标的类名添加到<body>标签内的 HTML 元素中。

  • 在这个例子中，我们使用了一个名为tree的图标，其类名是tree-deciduous。

<!DOCTYPE html>
<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <style>
      i.mysize {
         font-size: 100px;
      }
   </style>
</head>
<body>
   <h2>This is a Bootstrap Glyphicons Icon</h2>
   <p>We have set the size of this icon to 100px.</p>
   <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>

正如我们在输出中看到的，我们使用了树的图标，并使用 CSS 定义了其大小。

更新于：2022年11月8日

6000+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告