当前位置: 首页 > 软件库 > 应用工具 > 开源图标 >

Bootstrap Icons

Bootstrap 官方开源 SVG 图标库
授权协议 MIT
开发语言 JavaScript
所属分类 应用工具、 开源图标
软件类型 开源软件
地区 不详
投 递 者 韩淇
操作系统 跨平台
开源组织 Twitter
适用人群 未知
 软件概览

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;
}
    • Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and th

    • Integrating Bootstrap with React allows React developers to use Bootstrap’s state-of-the-art grid system and its various other components. 通过将Bootstrap与React集成,React开发人员可以使用Bootstrap的最新网格系统及其各种其他组件。 I

     相关资料
    • 我一直在关注OpenLayers网站上的图标颜色示例,http://openlayers.org/en/latest/examples/icon-color.html?q=color. 这对于我处理png和jpg图像很有效,但是当我切换到使用svg图像时,颜色一点也没有改变。没有错误。颜色就是不变。 下面是发生颜色变化的代码片段: 任何建议将不胜感激!

    • 全局 Svg Icon 图标组件。 默认在 @/icons 中注册到全局中,可以在项目中任意地方使用。所以图标均可在 @/icons/svg。可自行添加或者删除图标,所以图标都会被自动导入,无需手动操作。 使用方式 <!-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class--> <svg-icon icon-class="password"

    • 全球各大公司以及独立开发人员每天都在加入 Qt 的开发社区。他们已经认识到了 Qt 的架构本身便可加快应用程序开发进度。这些开发人员,无论是想开发单平台软件、还是想 开发跨平台软件,都可从 Qt 统一而直接的 API、强大的构建系统以及各种支持工具(例如 Qt Designer)中受益无穷。 Qt 具有一个极具活力并十分有益的用户社区,用户可以通过以下方式进行沟通: qt- interest 邮件

    • 本文向大家介绍destoon官方标签大全,包括了destoon官方标签大全的使用技巧和注意事项,需要的朋友参考一下 什么是标签调用? 标签调用是根据调用条件(condition)从数据表(table)读取调用数量(pagesize)条数据,并按排序方式(order)排序,最终通过标签模板的布局输出数据。 可以看出,标签的工作分两个部分,一是读取数据,二是显示数据。 标签函数原型 标签函数保存于 i

    • 我有一个svg精灵,如下所示: 现在我的问题是:我可以通过提取符号然后用svg-tag替换符号标签来制作一个svg吗?或者我如何实现这种转换以分离svg? 我想到了一个小脚本,它可以从上面的svg精灵中注入几个svg图标,这样图标可以更好地/单独地由css设置样式。 这里的事情是,在精灵中有一些符号,(据我所知)这些符号只能与

    •   https://www.dokuwiki.org/start?id=zh:development

    • 我想让 tinymce 编辑器默认的组件,比如:复制、粘贴、撤销等功能 像自定义功能一样显示图标下的文字,如下图这样 请问有没有办法实现呢?还望解答,万分感谢!

    • 本文向大家介绍svg如何转为字体图标?相关面试题,主要包含被问及svg如何转为字体图标?时的应答技巧和注意事项,需要的朋友参考一下 选择一个支持在线转换的网站 如IconFont或icomoon 上传svg文件的图标 在相应的地方进行下载 好处 字体图标直接用color自由控制颜色; 整合在一起,减少http请求等