bootstrap5 bootstrap-icons 详细引用方法

Bootstrap 5 是 Twitter 开发的用于前端开发的流行框架，它提供了一套响应式的 CSS 和 JavaScript 框架，使网站快速构建和设计变得简单。Bootstrap Icons 是一个独立的库，包含了 Bootstrap 5 的一系列矢量图标，可以在网页中轻松使用。

要在项目中引入 Bootstrap 5 和 Bootstrap Icons，你需要按照以下步骤操作：

1. **下载和引入依赖**:
- 如果你想使用 CDN (内容分发网络) ，可以在 HTML 文件头部添加相应的链接：

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

- 或者下载 Bootstrap 5 的 min 版本到本地，并将 CSS 和 JS 文件放在项目的 `assets` 或相应目录下。

2. **下载 icons**:
- 可以通过 npm 来安装 `bootstrap-icons` 包：

   npm install @fortawesome/fontawesome-svg-core
   npm install @fortawesome/free-solid-svg-icons

或者直接访问 https://fontawesome.com/icons 下载 SVG 文件。

3. **在 HTML 中使用 icons**:
使用 Font Awesome 的图标，你可以使用自定义标签 `<i>` 并设置 `data-icon` 属性：

   <i data-icon="fas fa-heart"></i> <!-- 'fas' 是 Family 名称，'fa-heart' 是具体的 icon 类名 -->

或者使用 `fa-heart` 作为 class 名，如果已经引入了相应的 CSS 文件：

   <i class="fas fa-heart"></i>

4. **引入 Font Awesome CSS**:
对于 icons 的样式，需要额外引入 Font Awesome 的 CSS 文件：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">