没有UI设计的孤单小程序程序员的救赎！一篇学会小程序引用Bootstrap图标

起因

独立开发小程序的工程师经常碰到的问题，就是没有设计师设计一套完备的图标可以使用。通过搜索发现Bootstrap已经做了一套比较完善的图标库可以使用，我们可以将其引入微信小程序。

下载图标库

下载地址为：github.com/twbs/icons/… ，点击如图所示的下载链接即可。

提取图标库文件

1. 解压缩bootstrap-icons.css文件

2. 重命名bootstrap-icons.css文件的扩展名为wxss

3. 修改bootstrap-icons.wxss，把@font-face这一段删除，引入国内的CDN资源

@font-face {
  font-family: "bootstrap-icons";
  src: url('https://cdn.staticfile.org/bootstrap-icons/1.7.1/font/fonts/bootstrap-icons.woff2') format('woff2');
  src: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/fonts/bootstrap-icons.woff2') format('woff2');
  src: url('https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap-icons/1.5.0/font/fonts/bootstrap-icons.woff2') format('woff2');
}

引入小程序

1. 把图标库文件复制到小程序工程，此处把图标库文件复制到了页面的文件夹内，如图所示

2. 在页面的index.wxss或者app.wxss文件内写入如下代码，即可引入图标库

@import './bootstrap-icons.wxss';

使用图标

使用方法如下，其中bi-power是图标的名称

<text
        class="bootstrap-icons bi bi-power"
/>

更多的图标参考Bootstrap图标库，这里要注意的是，下面显示的图标名称之前需要加上bi-才可以正常显示