Bootstrap开源了首套SVG图标库BootstrapIcons,其团队表示这是有史以来第一次拥有自己的图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建,现在可以免费用于任何项目,无论此项目是否使用了Bootstrap。查看BootstrapIcons»https://icons.getbootstrap.com/既然BootstrapIcons是SVG图标库,因此它们可以快速、轻松地扩展,并且可以配合CSS的使用进行个性化定制。
虽然它们是为Bootstrap设计的,但可以在任何项目中使用。不过要注意的是,它们现在尚处于alpha阶段,未来可能会出现重大变化。BootstrapIcons官网提供了检索图标种类的搜索框,用户可根据需求使用关键字(英文)进行查找。根据自己的设置,可以通过多种方式将BootstrapIcons添加到项目:将SVG复制粘贴为内嵌式的HTML元素svgclass=bibi-chevron-rightwidth=32height=32viewBox=002020fill=currentColorxmlns=http://www.w3.org/2000/svgpathfill-rule=evenoddd=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.svgalt=width=32height=32title=Bootstrap使用SVGspritesvgclass=biwidth=32height=32fill=currentColorusexlink:href=bootstrap-icons.svg#heart-fill//svgsvgclass=biwidth=32height=32fill=currentColorusexlink:href=bootstrap-icons.svg#toggles//svgsvgclass=biwidth=32height=32fill=currentColorusexlink:href=bootstrap-icons.svg#shop//svg通过CSS引入.bi::before{display:inline-block;content:;background-image:url(data:image/svg+xml,svgviewBox=001616fill=%23333xmlns=http://www.w3.org/2000/svgpathfill-rule=evenoddd=M89.5a1.51.50100-31.51.500003zclip-rule=evenodd//svg);background-repeat:no-repeat;background-size:1rem1rem;}详细教程查看文档。
本文来源:永利总站5856-www.planetcheapbikes.com
Copyright © 2006-2023 www.planetcheapbikes.com. 永利总站5856科技 版权所有 ICP备89540509号-4 XML地图 网站模板