Bootstrap Icons 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Bootstrap Icons 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Bootstrap Icons 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 应用工具开源图标
开源组织 Twitter
地区 不详
投 递 者 局长
适用人群 未知
收录时间 2020-08-02

软件简介

Bootstrap Icons 是 Bootstrap 开源的 SVG 图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建,现在可以免费用于任何项目,无论此项目是否使用了 Bootstrap。

084046_qJDz_2720166.png

Bootstrap Icons 是 SVG 图标库,因此它们可以快速、轻松地扩展,并且可以配合 CSS 的使用进行个性化定制。根据自己的设置,可以通过多种方式将 Bootstrap Icons 添加到项目:

  • 将 SVG 复制粘贴为内嵌式的 HTML 元素
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>
  • 通过<img>元素引用
<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">
  • 使用 SVG sprite
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>
  • 通过 CSS 引入
.bi::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(3)
发表于大前端专区
2020/12/13 04:43

Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!

我们最新的 Bootstrap Icons 发布版包含数十个新图标、重新设计的文档和呼声最高的新特性 —— 图标字体! 新的社交网络图标 我们的社交图标工作一开始比较慢 —— 人们可能只需要几个最大的社交网站。我们有意将这个清单设小,因为其目的不是为了全面覆盖。我们的目标是随着时间的推移增加一些,但这暂时就足够了! 新的多媒体图标 另一个主要添加的是我们扩展的媒体图标套件。有些人在涉及媒体控件及不同媒体类型时,向我们寻...

2
11
发表于大前端专区
2020/08/30 07:47

Bootstrap Icons v1.0.0 稳定版发布,开源 SVG 图标库

经历了 5 个 alpha 版本后,Bootstrap Icons 已于近日正式发布 v1.0.0 稳定版。目前该图标库已拥有超过 1100 个图标,团队计划在即将发布的小版本中再为其增加数百个图标。 自第五个 alpha 版本发布以来,团队已经重新绘制了超过三分之一的图标,主要是因为对路径和形状进行了微调。这里的大部分重绘和改进都是为图标字体(icon font)做准备,但遗憾的是,由于从 SVG 生成字体的工具未够完善,所以图标字体被推迟到了 v1.1.0 版本...

2
14
发表了资讯
2020/08/02 08:58

Bootstrap 开源 SVG 图标库 Bootstrap Icons

Bootstrap 开源了首套 SVG 图标库 Bootstrap Icons,其团队表示这是有史以来第一次拥有自己的图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建,现在可以免费用于任何项目,无论此项目是否使用了 Bootstrap。 查看 Bootstrap Icons »https://icons.getbootstrap.com/ 既然 Bootstrap Icons 是 SVG 图标库,因此它们可以快速、轻松地扩展,并且可以配合 CSS 的使用进行个性化定制。虽然它们是为 ...

9
53
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
3 评论
107 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部