Bootstrap Icons 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Bootstrap Icons 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript 查看源码 »
操作系统: 跨平台
开发厂商: 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 指数为
超过 的项目

Bootstrap Icons 的相关博客

Bootstrap 开源 SVG 图标库 Bootstrap Icons

Bootstrap 开源了首套 SVG 图标库 Bootstrap Icons,其团队表示这是有史以来第一次拥有自己的图标库,此图标库起初专门针对其...

开源图标库 Bootstrap Icons

Bootstrap Icons是Bootstrap开源的SVG 图标库,遵守MIT开源协议。无论是否使用 Bootstrap框架,都可以免费使用Bootstrap Ico...

开源图标库 Bootstrap Icons

Bootstrap Icons是Bootstrap开源的SVG 图标库,遵守MIT开源协议。无论是否使用 Bootstrap框架,都可以免费使用Bootstrap Ico...

Google的Material Icons

由于被Q了,截图备查

A set of icons for Inkscape 0.91

https://inkscape.org/en/~BobSongs/%E2%98%85iconssvg wget https://media.inkscape.org/media/resources/file/icons.svg cp...

方便管理plugin或rcp的icons

每个UI程序都离不开图片,一般的Eclipse插件,在一个类中定义了若干静态常量,每一个常量指定一个icon的名字,在程序中用到图...

BootStrap系列:BootStrap插件

BootStrap插件 一、data 属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。 ...

react-native-vector-icons使用方法

在网上看了很多react-native-vector-icons的使用方法,截至目前,发现所有的教程都是又复制文件,又是改代码.稍显麻烦,这里算是一...

【Bootstrap】Bootstrap如此好用!

Bootstrap,可以很容易创建出优雅的HTML界面一个前段框架,我们值得拥有。

flutter组件2【icons的使用】

1.UI产品 2.一些视频使用的 3.交流对话使用 4.文章发布内容使用 5.硬件设备使用 6.文件夹和文件使用 7.导航和箭头使用 备注:...

Bootstrap Icons 的相关问答

还没有任何问答,马上提问

评论 (3)

加载中
fontawesome不香么?
08/02 21:28
回复
举报
Fontawesome沉香,bootstrap清香,都香。
08/07 16:40
回复
举报
很棒!引入进来~
08/02 10:14
回复
举报
#Bootstrap Icons#,Bootstrap 开源的 SVG 图标库
08/02 09:23
回复
举报
更多评论
3 评论
66 收藏
分享
返回顶部
顶部