微信小程序开发-使用阿里巴巴矢量图标

步骤一：加入购物车

              打开iconfont矢量图标库，找到自己喜欢的图标，添加到购物车。

              

 

 步骤二：添加至项目

             

 

 步骤三：下载到本地

            

 

 步骤四：解压

               

 

 步骤五：转换ttf文件

               因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64，然后引用。

               1、进入https://transfonter.org/平台；

               2、点击Add fonts，添加iconfont.ttf

                     

 

                     

 

                     

 

                     勾选上必要选项。

                     

 

                      点击convert

                     

 

                     下载

                    

 

 步骤六：准备图标

                把刚刚Download的文件解压，打开，如下：

                

 

                以文本的形式打开stylesheet.css样式文件。可以看到font-face的url已经转换为base64格式。

                

 

                打开最早下载的那个解压文件，找到iconfont.css。

                

 

                然后把iconfont.css里面圈红的部分（即fontface部分我们不需要啦）复制到stylesheet.css

                

 

 步骤七：使用图标

             修改stylesheet.css的名称和后缀，我修改为common_icon.wxss。

             

 

             查看图标

             

 

 

             引用样式表

             

 

             页面调用

            

 

            调试器展示

            

 

            希望对大家有帮助。