引导图标是为项目添加自定义和上下文的绝佳方式。最好的部分？将图标添加到您的作品中很简单，入门也是如此。

立即下载：HTML & CSS 免费入门指南

在这篇文章中，我们将引导您了解您需要了解的有关 Bootstrap 图标的所有信息。您将详细了解如何以及为何使用它们，以及如何将它们添加到项目中。

• 什么是引导图标？

• 如何使用引导图标

• 如何将引导图标添加到项目

什么是引导图标？

作为快速复习，Bootstrap是一个流行的CSS框架。在 Bootstrap 的帮助下，创建响应迅速、移动优先的网站非常简单。Bootstrap 提供了 1800 多个图标，您可以使用它们来自定义项目。最好的部分是什么？您可以将 Bootstrap 图标与或不带有 Bootstrap 一起使用，因此它们用途广泛，并保证与您正在创建的任何项目一起使用。如果您是 Figma 用户，您也可以在那里使用这些图标。

引导图标有多种格式，例如 Web 字体、SVG 或 SVG 精灵。您可以使用最适合您的任何一种。这些图标也是一个有吸引力的选项，因为它们是高度可定制的。例如，通过简单地在CSS中应用颜色属性来更改颜色很容易。您还可以更改项目中使用的引导图标的大小。这要归功于 CSS 提供的字体大小属性。

如何使用引导图标

在学习如何在项目中使用 Bootstrap 图标时，天空是极限。您可以根据需要频繁或不频繁地使用它们。使用 Bootstrap 图标的吸引力在于，它们可以帮助您的项目更易于理解，并为用户提供额外的上下文信息。

由于您可以使图标可单击，因此您可能会注意到图标的转化率比纯文本的转化率更高。此外，图标可以创造奇迹，使您的网站感觉更易于导航，这对用户体验非常有用。

有丰富的Bootstrap CSS图标可以为您的项目添加上下文和自定义。无论您是想添加电子邮件图标、箭头还是社交媒体平台图标以链接到您的帐户，您都可以使用这些符号创建无限的可能性。您可能会注意到引导图标和流行的表情符号之间的一些相似之处。

您可以通过访问库来查看可以使用的 Bootstrap 图标的完整集合。以下是一些示例：

那么，如何将 Bootstrap CSS 图标添加到您的项目中呢？好消息是它非常简单。让我们演练一下如何开始，以便您现在可以开始利用 Bootstrap 图标的强大功能。

如何将引导图标添加到项目

准备好将引导图标添加到您的项目中了吗？让我们开始吧。首先，下面是你将使用的语法。

<i class="bi bi-NAME-OF-ICON"></i>

例如，假设您要在其中一个项目中包括引导日历图标。

您将使用的语法是：

<i class="bi bi-calendar"></i>

您可以在 Bootstrap 图标库的下方找到图标的名称。此外，您还可以在引导程序中更改这些图标的大小。使用日历示例，下面是用于执行此操作的语法。

<i class="bi bi-calendar" style="font-size: INSERT PX HERE"></i>

当然，您可以更进一步并添加颜色自定义。为此：

<i class="bi bi-calendar " style="font-size: INSERT-PX-HERE;color: INSERT-COLOR-HERE;"></i>

立即开始使用引导图标来增强用户体验。

如您所见，使用Bootstrap CSS图标可以创造奇迹，使您的网站更易于消化，更易于用户导航。因此，这些图标会对您的用户体验产生巨大影响。