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


    步骤一:加入购物车

                  打开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。

                 

                 查看图标

                 

                 引用样式表

                 

                 页面调用

                

                调试器展示

                

                希望对大家有帮助。

  • 相关阅读:
    Oracle中常见的33个等待事件小结
    DATAGUARD中手工处理日志v$archive_GAP的方法
    ORACLE 如何定位消耗资源的SQL
    ORACLE 全局索引和本地索引
    Oracle中获取执行计划的几种方法分析
    BUFFER CACHE之主要的等待事件
    查看tablespace实际使用量和剩余空间
    Linux环境配置文件的理解
    Shell 传递参数
    Linux开局配置注意事项
  • 原文地址:https://www.cnblogs.com/xiaobaicai12138/p/14233912.html
Copyright © 2020-2023  润新知