原生小程序实现阿里iconfont图标显示(保姆级图文)

1、点击阿里图标库

2、在阿里图标库选择自己需要的iconfont样式,只后点击加入购物车

 原生小程序实现阿里iconfont图标显示(保姆级图文)_第1张图片

3、点击右上角购物车图标后点击下载代码

原生小程序实现阿里iconfont图标显示(保姆级图文)_第2张图片

4、代码下载完毕后如下文件

 

 5、点击右键解压该文件,文件如下

原生小程序实现阿里iconfont图标显示(保姆级图文)_第3张图片

6、 打开转码网址,步骤如下

原生小程序实现阿里iconfont图标显示(保姆级图文)_第4张图片

 最后点击download下载

原生小程序实现阿里iconfont图标显示(保姆级图文)_第5张图片

7、解压转码后的压缩包文件如下

原生小程序实现阿里iconfont图标显示(保姆级图文)_第6张图片

 8、把stylesheet.css和之前在阿里图标库下载的iconfont.css直接拷贝到原生小程序的文件夹中(任意文件夹都可以,这俩文件之后要删除的)

9、在项目页面的wxss文件中,把stylesheet.css的所有直接复制到wxss中,把iconfont.css文件除了

原生小程序实现阿里iconfont图标显示(保姆级图文)_第7张图片

原生小程序实现阿里iconfont图标显示(保姆级图文)_第8张图片

10、最后在wxml文件中使用

就可以实现图标显示了

 

你可能感兴趣的:(小程序,小程序)