zoukankan      html  css  js  c++  java
  • 微信小程序开发-使用阿里巴巴矢量图标

    步骤一:加入购物车

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

                 

                 查看图标

                 

                 引用样式表

                 

                 页面调用

                

                调试器展示

                

                希望对大家有帮助。

  • 相关阅读:
    《个人-GIT使用方法》
    课后作业-阅读任务-阅读提问-1
    《20170914-构建之法:现代软件工程-阅读笔记》
    结对-贪吃蛇游戏-开发环境搭建过程
    《结对-贪吃蛇游戏-设计文档》
    Forward团队-爬虫豆瓣top250项目-需求分析
    Forward团队-爬虫豆瓣top250项目-成员简介与分工
    《结对-网页贪吃蛇游戏-需求分析》
    《团队-团队编程项目作业名称-团队信息》
    《对软件工程课程的期望》
  • 原文地址:https://www.cnblogs.com/xiaobaicai12138/p/14233912.html
Copyright © 2011-2022 走看看