登录 阿里巴巴矢量图标 （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. 散列算法－MD5

    信息摘要技术把明文内容按某种规则生成一段哈西值,即使明文消息只改动了一点点,生成的结果也会完全不同. MD5(Message-digest algorithm 5)就是信息摘要的一种实现,它可以从任意 ...

  2. 查看 postgresql 数据库编码，以及修改数据库编码

    查看数据表编码: \encoding 修改数据库编码: update pg_database set encoding = pg_char_to_encoding('UTF8') where datn ...

  3. 【转载】配置文件报错：不允许有匹配 [xX][mM][lL] 的处理指令目标

    今天编写代码的时候,不小心给一个xml文件的首行加了一行空格,导致了启动报了如题类似的错误,查到一篇文章,顺藤摸瓜发现了这个失误,文章转载如下: 框架整合 的时候,XML 配置文件大多数情况是从另一个 ...

  4. elasticSearch6源码分析(7)node

    1.node概述 Any time that you start an instance of Elasticsearch, you are starting a node. A collection ...

  5. springMVC实现 MultipartFile 多文件上传

    1.Maven引入所需的 jar 包(或自行下载) <dependency> <groupId>commons-io</groupId> <artifactI ...

  6. set集合容器（常用的使用方法总结）

     关于C++STL中set集合容器的学习,看别人的代码一百遍,不如自己动手写一遍. 构造set集合容器的目的是为了去重+排序+快速搜索.由于set集合容器实现了红黑树多的平衡二叉检索树的数据结构,在插 ...

  7. RadioButtonList根据值触发OnSelectedIndexChanged事件

    Insus.NET有使用Iframe来处理另外一个站点的enter form,由于需要自动循环填入数据,免去人手操作.但是原来的Enter from有RadioButtonList控件以及OnSele ...

  8. Unity3D学习笔记第一课

    第一课程:1.Unity类名必须与文件名保持一致2.讲属性设置为public可以在Unity中访问 public float speed; // Use this for initialization ...

  9. JSON数据的各种操作

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  10. 批处理REG学习

    首先在批处理操作注册表之前,应该了解REG命令的使用方式,详情请参阅一下网址: https://www.jb51.net/article/30078.htm 从以上链接内容我们可以详细了解使用reg的 ...