Bootstrap4 如何使用字体图标

Bootstrap 现在包括 1,300 多个高质量图标，这些图标为 SVG、SVG sprite 或 Web 字体格式。

使用字体图标的好处是，可以通过应用 CSS color 属性来创建任何颜色的图标。 此外，要更改图标的大小，只需使用 CSS font-size 属性即可。

现在，让我们看看如何在网页上包含和使用 Bootstrap5 字体图标。

在网页中包含 Bootstrap5 图标的最简单方法是使用 CDN 链接。 此 CDN 链接基本上指向一个远程 CSS 文件，其中包含生成字体图标所需的所有类。

我们可以在 Bootstrap 模板以及简单的网页中包含 Bootstrap5 图标，而无需使用 Bootstrap 框架。 让我们看看下面的例子：

尝试一下

要在代码中使用 Bootstrap 图标，我们需要在代码中加一个 标记，其中应用了单独的图标类 .bi-*。 使用 Bootstrap 图标的一般语法如下：

其中 class-name 是特定图标类的名称，例如 search, person, calendar, star, globe, facebook, twitter等。 查看所有 Bootstrap 图标类名的列表。

例如，要将搜索图标放在按钮内，可以执行以下操作：

尝试一下

上面示例的输出如下所示：

同样，可以将图标放置在导航、表单、表格、段落或任何我们想要的地方。 在下一章中，我们将看到如何在 Bootstrap 导航组件中使用这些图标。

注意 ：记得在图标元素的结束标签后（即标签后）留一个空格，当图标与文本字符串如内部按钮或导航链接一起使用时，以确保图标和文字之间有适当的间距 。

我们还可以在 Bootstrap5 中使用外部图标库。 Bootstrap 最流行和高度兼容的外部图标库之一是 Font Awesome。 它提供了超过 675 个图标，这些图标为 SVG、PNG 以及 Web 字体格式，来提高可用性和可扩展性。

可以简单地使用免费提供的 font-awesome CDN 链接将其包含在我们的项目中。 让我们看看下面的示例来了解它的基本工作原理：

尝试一下

要在代码中使用 Font Awesome 图标，我们需要在代码中添加一个 标签以及一个基类 .fa 和一个单独的图标类 .fa-*。 使用 font-awesome 图标的一般语法是：

其中 class-name 是特定图标类的名称，例如 search, person, calendar, star, globe, facebook, twitter等。 查看所有 Font Awesome 图标类名的列表。

例如，要将搜索图标放在按钮内，可以执行以下操作：

尝试一下

上面示例的输出如下所示：