Bootstrap 图标库是由Bootstrap团队官方维护的免费、开源、高质量图标库，可以 以SVG 矢量图、SVG sprite 或 web 字体 三种形式来使用。截止2024年2月，Bootstrap 5 1.11.3版中有2054多个字形图标，该图标库正在不断丰富中。
在Visual studio 中创建ASP.NET Core或者MVC 项目模板中，并没有引入Bootstrap 5 的字体和样式表，怎样在ASP.NET Core 项目上中引用 这些图标呢？可以将图标库及样式文件下载到本地，本地网站调用。
第一步：登录Bootstrap 官方网站 https://icons.getbootstrap.com/ 下载 图标压缩包，也可以在Bootstrap 中文站 https://icons.bootcss.com/下载。
第二步：解压压缩包，解压后的格式
第三步：拷贝含图标字体文件夹和 图标样式表。因为在网站中一般只使用字形图标，很少使用SVG矢量图。因此只需要拷贝bootstrap-icons.min.css文件和fonts。所以将解压后的的font文件夹拷贝到项目文件夹的 wwwroot\lib\bootstrap\dist 下，项目结构如图。
第三步：在项目布局页 _Layout.cshtml中，引入Css样式表，
第四步：在页面中使用字形图标。
1、基本用法：
在HTML i 元素包含1个 图标元素的类就可了。<i class="bi-apple"></i>。用span 元素也没有问题。 bi-apple 是具体的图标名称。
2、改变图标的颜色
<i class="bi-apple text-danger"></i>
3、改变图标的大小;
<i class="bi-apple h2"></i> // 在class中加1个h1-h6就可以定义标题大小，也可以加 display1-display6更大更粗。
<i class ="bi-apple sytle="font-size: 2rem; color: cornflowerblue;"></i> // 也可以利用 内联样式来改变大小、颜色，背景色。
4、图标和按钮的结合。
按钮内嵌入了1个心形图标。
<button class ="btn btn-primary">
<i class="bi-heart"></i>
</button>
提交按钮里嵌入1人个 查找图标。
<button type="submmit" class="btn btn-primary">
<span class="bi-search">search</span>
</button>
对于Bootstrap 图标库的使用，也可以引用 SVG矢量图形文件作为图像使用。
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32">
翻译
搜索
复制
标签：字形,图标库,SVG,Bootstrap,样式表,图标 From： https://www.cnblogs.com/liuyuanhao/p/18007815