小程序中阿里图标引入方式

小程序中阿里图标引入方式

 

一、打开http://www.iconfont.cn,搜索自己需要的图标,并添加入库,加入自己建好的项目

小程序中阿里图标引入方式_第1张图片

 二、将图标文件下载至本地

小程序中阿里图标引入方式_第2张图片

三、解压缩下载的文件,并打开iconfont.ttf文件,

小程序中阿里图标引入方式_第3张图片

小程序中阿里图标引入方式_第4张图片

四、将页面所有内容复制到需要引用图标的小程序页面的wxss页面,例如index.wxss

五、将iconfont.ttf文件转化为base格式文件

打开https://transfonter.org/

小程序中阿里图标引入方式_第5张图片

六,解压缩转化后的文件,打开stylesheet.css文件

小程序中阿里图标引入方式_第6张图片

 

 复制@font-face所有的样式。

覆盖iconfont.ttf中的@font-face部分内容,覆盖掉下图红线框住的代码。

小程序中阿里图标引入方式_第7张图片

 七、在index.wxml中引入

小程序中阿里图标引入方式_第8张图片

小程序中阿里图标引入方式_第9张图片

转载于:https://www.cnblogs.com/lvlina/p/9540655.html

你可能感兴趣的:(小程序中阿里图标引入方式)