Bootstrap Icons Bootstrap 官方开源 SVG 图标库开源项目

我要开发同款
匿名用户2020年08月02日
52阅读
开发技术JavaScript
所属分类应用工具、开源图标
授权协议MIT

作品详情

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

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

将SVG复制粘贴为内嵌式的HTML元素<svgclass="bibi-chevron-right"width="32"height="32"viewBox="002020"fill="currentColor"xmlns="https://www.w3.org/2000/svg"><pathfill-rule="evenodd"d="M6.6463.646a.5.5001.7080l66a.5.50010.708l-66a.5.5001-.708-.708L12.293106.6464.354a.5.50010-.708z"/></svg>通过<img>元素引用<imgsrc="/assets/img/bootstrap.svg"alt=""width="32"height="32"title="Bootstrap">使用 SVGsprite<svgclass="bi"width="32"height="32"fill="currentColor"><usexlink:href="bootstrap-icons.svg#heart-fill"/></svg><svgclass="bi"width="32"height="32"fill="currentColor"><usexlink:href="bootstrap-icons.svg#toggles"/></svg><svgclass="bi"width="32"height="32"fill="currentColor"><usexlink:href="bootstrap-icons.svg#shop"/></svg>通过CSS引入.bi::before{display:inline-block;content:"";background-image:url("data:image/svg+xml,<svgviewBox='001616'fill='%23333'xmlns='https://www.w3.org/2000/svg'><pathfill-rule='evenodd'd='M89.5a1.51.50100-31.51.500003z'clip-rule='evenodd'/></svg>");background-repeat:no-repeat;background-size:1rem1rem;}
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论