登录 阿里巴巴矢量图标 （https://www.iconfont.cn）

选中图标，加入购物车图标

下载源代码

解析出来如下文件结构

有两种使用方式：

1）不转换成base64的文件

找到 iconfont.css 文件，直接复制出来粘贴在微信小程序的wxss 文件内

再在小程序的wxml 里引用类

2）转换成base64的文件 在线转换 （https://transfonter.org/）

先找到下载的源码中的 iconfont.ttf 文件，导入

后续引用与1类似

微信小程序里使用阿里巴巴矢量图标的更多相关文章

  1. 微信小程序自定义字体及自定义图标问题说明

    自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...

  2. 微信小程序里如何用阿里云上传视频，图片。。

    纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...

  3. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  4. 微信小程序里使用 Redux 状态管理

    微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...

  5. 在微信小程序里使用 watch 和 computed

    在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData(),那么如何给小 ...

  6. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  7. 微信小程序里碰到的坑和小知识

    本文作者:dongtao   来自:授权地址 本人低级程序员,以下bug不能确保在其它地方可以以相同的原因复现.同时, 出现很多bug的原因是小程序的基本知识还有编码的基本功不到位造成 路还很长,共勉 ...

  8. 微信小程序里的bug---video 的play()

    微信小程序hidden转换后执行play()用真机测试不会播放.在调试器里可以. 解决方法,把hidden换成wx:if. 我刚开始以为网速问题,其实不是, 具体我也不知道为什,换上wxif解决了.

  9. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

随机推荐

  1. SpringCloud入门之eclipse新建maven子项目和聚合项目

    一.new maven project :  next 二.勾选 create a simple project  :  next 三.Group Id:项目的包路径 如com.test,之后创建的C ...

  2. B 树、B+ 树、B* 树

    B 树.B+ 树.B* 树 作者:July.weedge.Frankie.编程艺术室出品. 说明:本文从B树开始谈起,然后论述B+树.B*树,最后谈到R 树.其中B树.B+树及B*树部分由weedge ...

  3. NAT介绍

    NAT 即网络地址转换NAT作用:实现内网IP地址和公网IP地址之间的转换可以有效地缓解IP地址危机可以隐藏内网地址实现负载均衡实现内网和内网之间的通信 NAT分类:分类静态NAT:将内网IP地址一对 ...

  4. golang实现unicode码和中文之间的转换

    将中文转换为unicode码,使用golang中的strconv包中的QuoteToASCII直接进行转换,将unicode码转换为中文就比较麻烦一点,先对unicode编码按\u进行分割,然后使用s ...

  5. Dicom图像解析

    医疗图像解析 Dicom 后缀: .dcm..DCM Dicom中规定的坐标系是以人坐标系为绝对坐标系的,规定X轴正向指向病人的左侧,Y轴正向指向病人的背部,Z轴正向指向病人的头部.但是,坐标点的位置 ...

  6. java面向对象基础(三)：对象转型和多态

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  7. Core Animation之CABasicAnimation(基础动画)

    #import "ViewController.h" @interface ViewController () @property(nonatomic,strong)UIButto ...

  8. 在jQuery定义自己的扩展方法函数

    今早复习昨天的练习jQuery的DropDownList联动功能,如果想看回<jQuery实现DropDownList(MVC)>http://www.cnblogs.com/insus/ ...

  9. C#中利用LightningChart绘制曲线图表

    最近在做一个“基于C#语言的电炉温控制软件设计”的设计,我在大学并不是专业学习C#语言编程的,对C#的学习研究完全是处于兴趣,所以编程技术也不是很厉害,遇到问题多参照网络上的开源码. 这不,在做这个课 ...

  10. JS实现金额转换(将输入的阿拉伯数字)转换成中文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...