Bootstrap图标表

引入Bootstrap Icons

<!-- CDN方式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

<!-- 或使用npm安装 -->
npm install bootstrap-icons

使用图标

<!-- 使用i标签 -->
<i class="bi bi-heart"></i>
<i class="bi bi-star-fill"></i>

<!-- 使用span标签 -->
<span class="bi bi-check-circle"></span>

<!-- 调整大小 -->
<i class="bi bi-heart" style="font-size: 2rem;"></i>

<!-- 调整颜色 -->
<i class="bi bi-heart text-danger"></i>

在按钮中使用

<button class="btn btn-primary">
    <i class="bi bi-download"></i> 下载
</button>

<button class="btn btn-success">
    <i class="bi bi-check-circle"></i> 确认
</button>

常用图标分类

• 操作图标：check, x, plus, dash, trash, pencil, save
• 导航图标：arrow-left, arrow-right, chevron-up, chevron-down
• 社交图标：facebook, twitter, github, linkedin
• 文件图标：file, folder, image, file-text
• 通信图标：envelope, telephone, chat, bell

注意事项

• 图标类名格式：bi bi-{icon-name}
• 可以使用CSS调整图标大小和颜色
• 支持所有Bootstrap颜色类（text-primary, text-danger等）
• 图标是字体图标，可以像文字一样设置样式