【微信技术-微信小程序】------- 微信小程序引用阿里巴巴iconfont图标库样式使用说明

1.在阿里巴巴iconfont图标库中下载样式文件.[iconfont-阿里巴巴矢量图标库] 如下:

（1）首先选择【unicode】编码方式 然后点击【下载至本地】；

 （2）下载完毕 进行解压 然后打开解压完成之后的文件找到【iconfont.ttf】如下:

2.对文件进行转码【base64】让微信小程序支持此样式；如下：【转换地址:Online @font-face generator — TransfonterThis tool converts any TTF, OTF, WOFF, WOFF2 or SVG fonts to css @font-face formats with CSS and HTML sample files.https://transfonter.org/】

（1）点击【Add fonts】选择【iconfont.ttf】文件 在勾选其他配置；

（2）点击【Convert】开始进行转换、出现【Download】然后进行点击下载转换后文件如下: 

 (3)：打开转换后文件如下；

3,对转换后的文件在微信小程序中使用；

（1）把转换后的文件拷贝在项目文件中【根据自己的项目结构进行放在对应的地方】,把【stylesheet.css】后缀名改成【stylesheet.wxss】

  （2）打开【stylesheet.wxss】文件 ，需要把刚才在阿里巴巴图标平台下载的样式文件中的【iconfont.css】的一部分代码进行【拷贝】然后【粘贴】至微信小程序的【stylesheet.wxss】中 如下:

（1）【iconfont.css】文件:

 (2)【stylesheet.wxss】文件

(3)在【app.wxss】中引用此【stylesheet.wxss】即可； 

 [最后就完成此配置].

4.效果图如下: