目录
概述
Bootstrap 图标库拥有 1600 多个图标的免费、高质量的开源图标库。你可以以任何方式使用它们,例如 SVG 矢量图、SVG sprite 或 web 字体形式。并不局限于使用 Bootstrap 前端框架的项目。
官网
配置
以下为推荐的方法,在 Bootstrap Icons 的官网还可以查看更多配置的方法。
以下以 图标为例演示。
1.WEB 字体形式
CSS 字体图标文件应用
- HTML 头部 CDN 加载
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
- CSS 引用 CDN 加载
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
以上 HMTL 或 CSS 加载方式任选一种即可。
icon 图标字体内容显示
- 在 HTML 需要显示图标的相应位置增加以下代码即可。
<i class="bi-info-circle"></i>
2.SVG 矢量图
SVG 矢量图文件应用
只需要在 HTML 文档内嵌入以下 svg 代码即可实现图标展示。
建议设置 width: 1em
(以及可选的 height: 1em
),便于后期通过 font-size
属性重置图标的大小,同时支持 width=""
height=""
来重设。
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
SVG 更多可选项样式
正常显示颜色
.className svg {
fill: #6395f9;
}
鼠标悬停样式
svg:hover path{
fill: #ff6868;
}
友情提示:本站所有文章,如无特殊说明或标注,均为何星星原创发布。与此同时,趋于近年来本站的文章内容频繁被他站盗用与机器采集,现已全局禁用网站文字内容操作,了解详情或转载文章请 点此 继续!
0 条评论