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;}
评论