小程序如何引用iconfont图标

阿里巴巴图标库:http://www.iconfont.cn/

1、下载图标文件

小程序如何引用iconfont图标_第1张图片
image.png

小程序如何引用iconfont图标_第2张图片
image.png

这两个文件要用

2、转化图标文件

转换地址:https://transfonter.org/

小程序如何引用iconfont图标_第3张图片
image.png

小程序如何引用iconfont图标_第4张图片
image.png

小程序如何引用iconfont图标_第5张图片
image.png

3、合并文件

将stylesheet.css的内容copy出来替换最前面第一次下载的文件iconfont.css中的头内容,最后如下
小程序如何引用iconfont图标_第6张图片
image.png

4、引入并使用

1、在小程序app.wxss中引入

@import "./utils/iconfont.wxss";

2、使用:

 
      
      
image.png

你可能感兴趣的:(小程序如何引用iconfont图标)