登录 阿里巴巴矢量图标 （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. ASP.NET MVC View中的标签(tag)

    在编辑View的时候会用到各种HTML标签,如<a>,<input>,<p>等待,这些标签在ASP.NET MVC中都有对应的编程语法,它叫Razor,它是帮助我们 ...

  2. QT QPushButton

    #include<QApplication> #include<QWidget> #include<QPushButton> #include<QMenu&g ...

  3. APIX招聘

  4. 第一次项目上Linux服务器（二:——安装jdk）

    本人采用的是rpm安装jdk1.8 1.下载jdk 去jdk下载页面找到要下载的jdk 本人下载的是jdk-8u161-linux-x64.rpm,百度云资源链接:链接:https://pan.bai ...

  5. 【JS】input输入框只能输入数字

    一.实现思路 input只能输入纯数字的思路其实很简单,监听输入框值的变化,每次输入检索输入框的值,将非数字的字段替换成空,再将此值赋予给输入框. 关键代码: \d:匹配数字 ^/d:全文匹配非数字 ...

  6. el-upload源码修改跳坑

    之前给element-ui提了一个问题,结果没有鸟我,没办法,只能修改源码来满足需求了 (备注:element-ui2依然没有修改,为了迎合产品还是要改源码) 本文讨论的组件属性仅限于list-typ ...

  7. C#微信小程序服务端获取用户解密信息

    using AIOWeb.Models; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.C ...

  8. pdf.js 使用汇总

    https://www.cnblogs.com/iPing9/p/7154753.htmlhttp://blog.csdn.net/m0_38021128/article/details/708684 ...

  9. [日常] Linux下的docker实践

    1.Linux 发展出了另一种虚拟化技术:Linux 容器(Linux Containers,缩写为 LXC) 2.Linux 容器不是模拟一个完整的操作系统,而是对进程进行隔离 3.Docker 属 ...

  10. Crazy Shopping(拓扑排序+完全背包)

    Crazy Shopping(拓扑排序+完全背包) Because of the 90th anniversary of the Coherent & Cute Patchouli (C.C. ...