在网站项目中引用 Bootstrap 5字形图标

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>

<span class="bi-house text-white"></span>  

 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="submit" class="btn btn-primary">
   <span class="bi-search">   查找    </span>

 </button>

 

对于Bootstrap 图标库的使用，也可以引用 SVG矢量图形文件作为图像使用。
<img src="/assets/icons/bootstrap.svg" alt="Bootstrap" width="32" height="32">

 

翻译

搜索

复制