Bootstrap 图标
在本教程中，您将学习如何在网页上包含和使用 Bootstrap 图标。
在 Bootstrap 5 中使用图标
Bootstrap 现在包含超过 1,300 个高质量图标，这些图标以 SVG、SVG sprite 或 Web 字体格式提供。 您可以在任何项目中使用或不使用 Bootstrap。
使用字体图标的好处是，您可以通过应用 CSS color 属性来创建任何颜色的图标。 此外，要更改图标的大小，您只需使用 CSS font-size 属性即可。
现在，让我们看看如何在网页上包含和使用 Bootstrap 图标。
在网页中包含 Bootstrap 图标
在网页中包含 Bootstrap 图标的最简单方法是使用 CDN 链接。 这个 CDN 链接基本上指向一个远程 CSS 文件，其中包含生成字体图标所需的所有类。
您可以在 Bootstrap 模板以及简单的网页中包含 Bootstrap 图标，而无需使用 Bootstrap 框架。 让我们看一下下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Including Bootstrap Icons in HTML</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
<h1><i class="bi-globe"></i> Hello, world!</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>如何在代码中使用 Bootstrap 图标
要在您的代码中使用 Bootstrap 图标，您需要一个带有单独图标类 .bi-* 的 <i> 标签。 使用 Bootstrap 图标的一般语法是：
其中 class-name 是特定图标类的名称，例如 search, person, calendar, star, globe, facebook, twitter，以此类推。 请参阅所有 Bootstrap 图标类 的列表。
例如，要将搜索图标放在按钮内，您可以执行以下操作：
<button type="submit" class="btn btn-primary"><span class="bi-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="bi-search"></span> Search</button>— 上面示例的输出将如下所示：
同样，您可以在导航、表单、表格、段落或您想要的任何地方放置图标。 在下一章中，您将看到如何在 Bootstrap 导航组件 中使用这些图标。
注意： 记得在图标元素的结束标签后（即 </i> 标签后）留一个空格，在使用图标和内部按钮或导航链接等文本字符串时，确保有 是图标和文本之间的适当间距。
在 Bootstrap 中使用 Font Awesome 图标
您还可以在 Bootstrap 中使用外部图标库。 Bootstrap 最受欢迎和高度兼容的外部图标库之一是 Font Awesome。 它提供了超过 675 个图标，这些图标以 SVG、PNG 以及 Web 字体格式提供，以提高可用性和可扩展性。
您可以简单地使用免费提供的 font-awesome CDN 链接将其包含在您的项目中。 让我们看一下以下示例，以了解其基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Including Font Awesome Icons in Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1><i class="fa fa-globe"></i> Hello, world!</h1>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>如何在代码中使用 Font Awesome 图标
要在代码中使用 Font Awesome 图标，您需要一个 <i> 标记以及一个基类 .fa 和一个单独的图标类 .fa-*。 使用 font-awesome 图标的一般语法是：
其中 class-name 是特定图标类的名称，例如 search, user, calendar, star, globe, facebook, twitter，以此类推。 请参阅所有 Font Awesome 图标类 的列表。
例如，您可以将 font-awesome 搜索图标放置在这样的按钮内：
<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Search</button>— 上面示例的输出将如下所示：
同样，您可以将 Font Awesome 图标放置在导航、表单、表格、段落和其他组件中，就像使用 Bootstrap 图标一样。