Bootstrap样式(bootstrapicon)

在网页开发中，为元素添加美观且具有一致性的图标可以显著提升用户体验。Bootstrap Icons 提供了一套高质量的SVG图标集合，能够轻松集成到基于Bootstrap框架的项目中。提供几种使用Bootstrap Icons的方法，并解决相关问题。

1. 引入Bootstrap Icons

最直接的解决方案是通过官方提供的CDN链接引入图标库。这不需要下载任何文件，只需在HTML文档的<head>标签内添加一行代码：

html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="external nofollow" >

这段代码会加载的Bootstrap Icons样式表。之后你就可以在页面中使用类名为bi bi-图标的名称来显示图标了。

2. 使用方法

2.1 单独使用

在需要插入图标的地方，按照以下格式书写：
html 
这里的alarm就是具体图标的名称，你可以根据需求替换为其他名称，例如bi-house表示房子图标、bi-person表示人像图标等。

2.2 与按钮结合

为了让按钮更加直观易懂，可以在按钮中加入图标：
```html


这样不仅提高了按钮的功能性，还增强了视觉效果。</p>

<h2><h2>3. 自定义大小和颜色</h2></h2>

<p>有时默认的图标大小和颜色可能不符合设计要求，这时可以通过CSS来自定义。对于大小调整，可以直接设置字体大小；对于颜色修改，则可以利用颜色属性或文本颜色类。</p>

<h4>3.1 修改大小</h4>

<p>```html</p>


    .large-icon {
        font-size: 2rem;
    }


<p><i class="bi bi-star large-icon"></i>