bootstrap icons 引用

Bootstrap Icons 是一组轻量级的SVG图标集，它独立于Bootstrap框架，可以直接在HTML文档中引用和使用。以下是引用Bootstrap Icons的步骤：

1. **下载或包含图标库**：你可以从Bootstrap Icons的官方网站(https://icons.getbootstrap.com/)下载最新的.min.js文件，或者直接在HTML头部通过CDN链接引用：

<!-- 通过CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/js/all.min.js"></script>

或者将`all.min.js`替换为你需要的具体图标包，如`fas.min.js`（Font Awesome Solid）或`fab.min.js`（Font Awesome Brands）等。

2. **使用图标**：在HTML元素上添加`data-icon`属性，指定你想显示的图标名称。例如：

<i class="fas fa-heart"></i> <!-- Font Awesome 标准图标 -->
<i data-icon="fas fa-heart"></i> <!-- Bootstrap Icons 样式 -->

3. **JavaScript支持**：如果要在JavaScript中动态插入图标，可以通过`.fontawesomeIcon()`方法：

document.getElementById('myIcon').innerHTML = '<i class="fas fa-heart"></i>';

或者使用Bootstrap提供的`FontAwesomeIcon`组件：

const iconElement = document.createElement('span');
iconElement.classList.add('fa', 'fa-heart');
document.body.appendChild(iconElement);