Bootstrap 5 alpha |图标库

Bootstrap首次拥有自己的图标库，该图标库是针对引导程序组件和文档进行定制设计和构建的。

Bootstrap图标旨在与Bootstrap组件一起使用，从表单控件到导航。引导程序图标是SVG，它们可以快速，轻松地进行缩放，并可以使用CSS进行样式设置。虽然它们是为Bootstrap构建的，但它们会添加任何项目。它们是在MIT许可下开源的，因此您可以根据需要自由下载，使用和自定义。

如何安装：

引导程序图标已发布到npm，但也可以根据需要下载。

通过命令行使用npm安装Bootstrap图标。

npm install bootstrap-icons

用法：

引导程序图标是SVG。因此，您可以根据所处理项目的类型，以各种方式将其包含在HTML代码中。

1. 将粘贴的SVG复制为嵌入式HTML
2. 带有元素的SVG Sprite
3. 作为外部图像

注意：默认情况下，Bootstrap图标的宽度和高度为“ 1 em ”，以便通过字体大小轻松调整大小。

多种使用方式：

• 将粘贴的SVG复制为嵌入式HTML：将图标嵌入到页面的HTML中(而不是外部图像文件)。在这里，我们使用了自定义的宽度和高度。

  例子：

  输出：

  

• 带有元素的SVG Sprite：使用SVG Sprite通过元素插入任何图标。使用图标的文件名作为片段标识符(例如，heart是#heart)。 SVG Sprite允许您引用类似于元素的外部文件，但具有currentColor的功能以方便主题化。

  例子：

  输出：

  

• 作为外部映像：将Bootstrap图标SVG复制到您选择的任何目录，并使用标签像引用普通映像一样引用它们。

  例子：

  输出：

  

• 图标样式：

  对于图标的样式，请将其与文本相同。颜色也可以通过使用.text- *类或自定义CSS进行更改。

  例子：

  输出：