欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序如何在线引入iconfont

程序员文章站 2024-02-16 17:06:22
...

1、在阿里巴巴矢量图标库官网上将项目所需要用到的图标建立好,在我的项目中会有一个在线链接,点击复制代码,将在线链接的地址复制下来,放在浏览器的官网上打开,会出现相应的样式代码,将代码全部复制下来,如图所示:
第一步

添加图标至项目:

微信小程序如何在线引入iconfont
第二步

点击在线链接,并复制代码

微信小程序如何在线引入iconfont
第三步

将在线链接的地址复制下来,放在浏览器的官网上打开,将代码全部复制下来

微信小程序如何在线引入iconfont
2、在utils文件夹下建立一个iconfont.wxss文件,将之前在浏览器复制的代码全部放在这个文件里面,如图所示:
微信小程序如何在线引入iconfont

3、在app.wxss文件中去引入这个文件,代码如下:

@import "./iconfont.wxss"

4、引入完以后,去使用这个样式库,通过class类名去引入,第一个为 iconfont, 第二个为样式库的类名,例如,在index.wxml中使用,代码如下:

<i class="iconfont icon-weixin"></i>

微信小程序如何在线引入iconfont