极客教程Bootstrap 5 alpha 图标库
Bootstrap第一次有了自己的图标库，为Bootstrap组件和文档定制设计和建造。
Bootstrap图标的设计是为了与Bootstrap组件（从表单控件到导航）相配合。Bootstrap图标是SVG，以便快速简单地扩展，并可使用CSS进行造型。虽然它们是为Bootstrap设计的，但它们可以添加任何项目。它们是在MIT许可下开源的，所以你可以自由地下载、使用和定制你需要的东西。
如何安装：
Bootstrap的图标被发布到npm，但如果需要也可以下载。
通过命令行用npm.安装Bootstrap Icons。
npm install bootstrap-icons
Usage:
Bootstrap图标是SVG。因此，你可以根据你正在进行的项目的类型，以各种方式在你的HTML代码中包含。
- 复制粘贴SVG作为嵌入式HTML
- 带有
<use>元素的SVG Sprite - 作为一个外部形象
注意： Bootstrap图标默认包括一个宽度和高度为”1 em”的图标，以便于通过字体大小来调整大小。
复制粘贴SVG作为嵌入式HTML :将你的图标嵌入你的页面的HTML中（而不是一个外部图像文件）。这里我们使用了一个自定义的宽度和高度。
<svg class="bi bi-chevron-right " width="64" height="64"
viewBox="0 0 20 20" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010
.708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646
4.354a.5.5 0 010-.708z"/>
</svg>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Cards</title>
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width,
initial-scale=1"/>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/v5.0.0/css/bootstrap.min.css" />
</head>
<body>
<svg class="bi bi-chevron-right"
width="64" height="64"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010
.708l-6 6a.5.5 0 01-.708-.708L12.293
10 6.646 4.354a.5.5 0 010-.708z"/>
</svg>
</body>
</html>
输出: 
SVG Sprite与使用SVG sprite来插入任何通过<use>元素的图标。使用图标的文件名作为片段的标识符（例如，heart是#heart）。SVG sprite允许你引用一个类似于<img> 元素的外部文件，但有currentColor的力量，便于主题化。
示例:
<svg class="bi" width="40"
height="40" fill="currentColor">
<use xlink:href=
"bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="40"
height="40" fill="currentColor">
<use xlink:href=
"bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="40"
height="40" fill="currentColor">
<use xlink:href=
"bootstrap-icons.svg#shop"/>
</svg>
输出:
作为外部图片：将Bootstrap图标的SVG复制到您选择的任何目录中，并像普通图片一样用<img> 标签引用它们。
示例:
<img src="/Icons/img/bootstrap.svg"
alt="" width="40"
height="40" title="Icons">
输出:
图标的造型：
对于图标的样式，请考虑它们与文本相同。颜色也可以通过使用.text-*类或自定义CSS来改变。
示例:
<svg class="bi bi-alert-triangle text-success "
width="40" height="40"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
.....
</svg>
输出:
