Bootstrap 5 图标库入门指南

引言

这是 Bootstrap 历史上首次拥有属于自己的专用图标库，这些图标是专门为 Bootstrap 组件及其文档量身定制和构建的。

Bootstrap 图标旨在与我们的组件无缝协作，从表单控件到导航栏无一例外。这些图标均为 SVG 格式，这意味着它们能够迅速且简单地缩放，并且可以使用 CSS 轻松进行样式调整。虽然它们是为 Bootstrap 打造的，但同样适用于任何项目。它们采用 MIT 许可证开源，所以您可以自由地下载、使用和根据需要进行定制。

如何安装

Bootstrap 图标已发布至 npm，当然，如果有需要，您也可以直接下载它们。

让我们通过命令行使用 npm 安装 Bootstrap 图标：

npm install bootstrap-icons

使用方法

Bootstrap 图标是 SVG 格式。因此，您可以根据当前项目的具体类型，以多种方式将它们包含在您的 HTML 代码中。

• 作为嵌入式 HTML 直接复制粘贴 SVG
• 使用 元素制作 SVG 精灵（Sprite）
• 作为外部图片引用

注意： 默认情况下，Bootstrap 图标的宽度和高度为 "1 em"，以便通过 font-size 轻松调整大小。

作为嵌入式 HTML 复制粘贴 SVG

我们可以将图标直接嵌入到页面的 HTML 中（而不是作为外部图像文件引用）。在这里，我们使用了自定义的宽度和高度。

示例：

输出：

!image

使用 元素的 SVG 精灵

让我们使用 SVG 精灵通过 元素插入任何图标。使用图标的文件名作为片段标识符（例如，心形图标是 #heart）。SVG 精灵允许您像引用 元素一样引用外部文件，但同时拥有 currentColor 的强大功能，便于进行主题化设置。

示例：

输出：

!image

作为外部图片使用

您可以将 Bootstrap 图标 SVG 复制到您选择的任何目录中，并像使用普通图片一样通过 标签引用它们。

示例：

输出：

!image

图标的样式设置

关于图标的样式，我们可以将它们视为文本来处理。颜色也可以通过使用 .text-* 类或自定义 CSS 来更改。

示例：

.....

输出：

!image