Bootstrap 5 alpha 图标库
Bootstrap第一次有了自己的图标库,为Bootstrap组件和文档定制设计和建造。
Bootstrap图标的设计是为了与Bootstrap组件(从表单控件到导航)相配合。Bootstrap图标是SVG,以便快速简单地扩展,并可使用CSS进行造型。虽然它们是为Bootstrap设计的,但它们可以添加任何项目。它们是在MIT许可下开源的,所以你可以自由地下载、使用和定制你需要的东西。
如何安装:
Bootstrap的图标被发布到npm,但如果需要也可以下载。
通过命令行用npm.安装Bootstrap Icons。
Usage:
Bootstrap图标是SVG。因此,你可以根据你正在进行的项目的类型,以各种方式在你的HTML代码中包含。
- 复制粘贴SVG作为嵌入式HTML
- 带有
<use>
元素的SVG Sprite - 作为一个外部形象
注意: Bootstrap图标默认包括一个宽度和高度为”1 em”的图标,以便于通过字体大小来调整大小。
复制粘贴SVG作为嵌入式HTML :将你的图标嵌入你的页面的HTML中(而不是一个外部图像文件)。这里我们使用了一个自定义的宽度和高度。
示例:
输出:
SVG Sprite与使用SVG sprite来插入任何通过<use>
元素的图标。使用图标的文件名作为片段的标识符(例如,heart是#heart)。SVG sprite允许你引用一个类似于<img>
元素的外部文件,但有currentColor的力量,便于主题化。
示例:
输出:
作为外部图片:将Bootstrap图标的SVG复制到您选择的任何目录中,并像普通图片一样用<img>
标签引用它们。
示例:
输出:
图标的造型:
对于图标的样式,请考虑它们与文本相同。颜色也可以通过使用.text-*
类或自定义CSS来改变。
示例:
输出: