Bootstrap 官方开源图标（icon）库
Bootstrap 图标库整理
Bootstrap 提供了丰富的图标集合,可用于网站和应用程序的图标需求。本文整理了 Bootstrap 当前可用的所有图标,并以表格的形式呈现,方便查阅和使用。
图标字体安装
要使用 Bootstrap 图标,需要先安装图标字体文件。可以通过 npm 安装:
Copy code
npm install bootstrap-icons或通过 CDN 引入:
html
Copy code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">图标用法
在 HTML 中,可以通过 标签加上图标类名来使用图标:
html
Copy code
<i class="bi bi-alarm"></i>Bootstrap 图标类名的格式为:bi bi-${图标名}。
图标样式设置
可以通过 CSS 来设置图标的大小、颜色等样式:
css
Copy code
.bi {
font-size: 2rem;
color: blue;
}图标列表
Bootstrap 当前可用的所有图标如下表所示:
| 图标 | 类名 | 图标 | 类名 |
|---|---|---|---|
| 0-circle | align-bottom | ||
| 0-circle-fill | align-center | ||
| 0-square | align-end | ||
| 0-square-fill | align-middle | ||
| 1-circle | align-start | ||
| 1-circle-fill | align-top | ||
| 1-square | alipay | ||
| 1-square-fill | alt | ||
| 123 | amd | ||
| 2-circle | android | ||
| 2-circle-fill | android2 | ||
| 2-square | app | ||
| 2-square-fill | app-indicator | ||
| 3-circle | apple | ||
| 3-circle-fill | archive | ||
| 3-square | archive-fill | ||
| 3-square-fill | arrow-90deg-down | ||
| ⋯ | ⋯ | ⋯ | ⋯ |
可访问性
对于视力障碍的用户,图标将无法传达信息。如果图标表达了重大的含义,应该添加其他辅助手段,如文字说明等。
总结
Bootstrap 提供了丰富的图标,本文对所有图标进行了整理,列出了图标的类名、安装方法和使用方式,以便快速查找所需图标。图标可以灵活设置样式,但需要注意可访问性问题。
数据统计
相关导航
暂无评论...
XieNiao 血鸟导航，集网址、资源、资讯于一体的定制化导航主题，简约优雅的设计风格，自定义网址的用户功能，自定义主页，欢迎您的体验
赣公网安备36020002000448号