bootstrap 图标_开源软件丨Bootstrap 官方开源 SVG 图标库 Bootstrap Icons

分手后的思念是犯贱 2023-01-01 12:58 386阅读 0赞

![2b8858bf277d3152b1c5abbbc4135481.png][]

喜欢就关注我们吧！

Bootstrap 开源 了首套 SVG 图标库 Bootstrap Icons，其团队表示这是有史以来第一次拥有自己的图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建

现在可以免费用于任何项目，无论此项目是否使用了 Bootstrap。

**软件基本信息**

<table> 
 <tbody> 
  <tr> 
   <th>序号</th> 
   <th>维度</th> 
   <th>详情</th> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>软件类型</td> 
   <td>开源图标</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>授权协议</td> 
   <td>MIT</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>开发厂商</td> 
   <td>Twitter</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>开发语言</td> 
   <td>JavaScript</td> 
  </tr> 
 </tbody> 
</table>

![2f0ee4428fab7a40c6f4b2ac582f331a.png][]

查看 Bootstrap Icons »https://icons.getbootstrap.com/

既然 Bootstrap Icons 是 SVG 图标库，因此它们可以快速、轻松地扩展，并且可以配合 CSS 的使用进行个性化定制。

虽然它们是为 Bootstrap 设计的，但可以在任何项目中使用。不过要注意的是，它们现在尚处于 alpha 阶段，未来可能会出现重大变化。

![5d4bffd90865f0f0856443ab281c0541.png][]

Bootstrap Icons 官网提供了检索图标种类的搜索框，用户可根据需求使用关键字(英文)进行查找。

![2f91dd5cb36173f56ce34d5d6cf7b1e0.png][]

根据自己的设置，可以通过多种方式将 Bootstrap Icons 添加到项目：

*  将 SVG 复制粘贴为内嵌式的 HTML 元素

*  通过``元素引用

*  使用 SVG sprite

*  通过 CSS 引入

.bi::before {
         
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    }

**PS：**更多关于 **Bootstrap **的信息及**源码下载**，请在“开源中国”公众号对话框回复关键词：0818

▼  往期精彩回顾 ▼ 迈出云原生重要一步 — Dubbo 3 应用级服务发现Docker 禁止美国“实体清单”主体使用，Docker 开源项目不受影响一个数学家数了数小说中 20000 个字母，然后诞生了语言识别模型让老鹰强化学习，捉更多小鸡！张东升，我知道是你！如何使用GAN做一个秃头生产器

![98f0878b0e2323072b474b75a36222b1.gif][]

![5721401bcb83d11e6f2117f0024f90ad.png][]

觉得不错，请点个在看呀

[2b8858bf277d3152b1c5abbbc4135481.png]: /images/20221120/11051107c18243b6bc625be5dc60b95b.png
[2f0ee4428fab7a40c6f4b2ac582f331a.png]: /images/20221120/beb1a4e18fb44396a7eac2205b9623cc.png
[5d4bffd90865f0f0856443ab281c0541.png]: /images/20221120/b01e8d8be2c34be6896cb4d6091e5240.png
[2f91dd5cb36173f56ce34d5d6cf7b1e0.png]: /images/20221120/15065272b8214bee963dd52946e2fd52.png
[98f0878b0e2323072b474b75a36222b1.gif]: /images/20221120/dbf44862a7c24efea59149275e3544de.png
[5721401bcb83d11e6f2117f0024f90ad.png]: /images/20221120/c6f7540678964a5b85fb85438eb8d950.png