Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库

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 提供了丰富的图标,本文对所有图标进行了整理,列出了图标的类名、安装方法和使用方式,以便快速查找所需图标。图标可以灵活设置样式,但需要注意可访问性问题。

数据统计

数据评估

Bootstrap热度已经达到330；以上网站数据仅供参考，建议大家以官方数据为准！更多Bootstrap数据如：访问速度、搜索引擎收录以及索引量、用户体验、品牌价值观等；请联系Bootstrap的官方提供。如该站的IP、PV、跳出率等！

特别声明

本站血鸟导航提供的Bootstrap相关数据内容都来源于网络或站长收集，不保证外部链接和内容的准确性和完整性，同时，对于该外部链接的指向，不由血鸟导航实际控制，在2023年8月28日下午8:54收录时，该网页上的内容，都属于合规合法，后期网页的内容如出现违规或不对称，欢迎联系我们邮箱进行删除或更改，血鸟导航不承担任何责任。

血鸟导航致力于帮助广大用户，精准快捷的找到需要的网站！本文地址https://m.tuanci.com/sites/64726.html转载请注明