Bootstrap IconsBootstrap 官方开源 SVG 图标库
Bootstrap Icons 是 Bootstrap 开源的 SVG 图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建,现在可以免费用于任何项目,无论此项目是否使用了 Bootstrap。
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;
}
评论
Bootstrap IconsBootstrap 官方开源 SVG 图标库
BootstrapIcons是Bootstrap 开源的 SVG图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建,现在可以免费用于任何项目,无论此项目是否使用了Bootst
Bootstrap IconsBootstrap 官方开源 SVG 图标库
0
inoIconViewAndroid 开源图标库
IonIconView 是基于ionicons.com提供的出色图标。里面包含了常用的android风格的图标ios7风格的图标以及一些社会化分享图标,总共500个左右。使用方法:添加库和依赖到你的项
inoIconViewAndroid 开源图标库
0
Boxicons开源 Web 图标库
Boxicons是一个精心设计的开源图标集,包含1500多个图标,可丰富您的网站/应用程序体验。安装要通过npm安装,只需执行以下操作:$npminstallboxicons--save导入模块imp
Boxicons开源 Web 图标库
0
lyicon开源字体图标库
lyicon是一套图标众多、风格清新、更适合国人使用的开源字体图标库,100%兼容fontawesome的图标,细化图标,把实心图标都改成空心,更加方便APP及现代化网页使用。特性:1、实心图标空心化
lyicon开源字体图标库
0