好，忙，我懂.....

首先把图标放进项目里(废话)；

接下来把这些图标下载到本地（这里不介绍网络途径了，下载就完事了）

然后利用一个网站将这个ttf文件转成base64文件https://transfonter.org/（幽幽绿光中夹杂了一些爱情的颜色）没错，就是这个网站

进入  https://transfonter.org/ 网站后界面是酱紫，然后我们用 阿里的iconfont.ttf文件 去转换成我们需要的CSS文件

下载之后就得到我们想要的css文件啦

打开我们的薇信小程序，建立一个新的公共的样式表，例如这样：

之后就把我们转换好的css样式文件复制粘贴进去（人类的本质就是复读机 /手动滑稽），复制进去之后你会发现是这个鬼样子：

无妨，能用就好，可能这就是base64吧~

引用 样式的部分我们差不多完成了，下面我们去 使用 这个样式

首先写个标签，ps：class名字随意，这里 用性价比高 的class名来举栗，

之后你就得到等同于HTML <i class="iconfont icon-biaodan"></i> 的图标

之后图标就出来了

另外在重复一遍刚才的字符修改要将前三位 &#X 替换成 \ 符号

PS：这套流程是最直接的，但不是最好的，还有一些CSS上的使用优化，我想只需要几张图，你就会秒懂。其他的地方还待在使用中去发现，附图：

那么，前路昭然，你我共进

微信小程序本地引用iconfont（阿里巴巴矢量图标库）的更多相关文章

  1. 微信小程序如何引用iconfont图标

    最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face { font-family: 'iconfont'; src: url('iconfont.eot ...

  2. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

  3. 微信小程序如何使用iconfont阿里巴巴图标库？

    步骤: 1.如图先下载:  2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...

  4. iconfont阿里巴巴矢量图标库批量保存

    F12输入——var iconList = document.querySelectorAll('.icon-gouwuche1');for (var i = 0; i < iconList.l ...

  5. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  6. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  7. 阿里巴巴矢量图标库（iconfont）批量全选的方法

    阿里巴巴矢量图标库: https://www.iconfont.cn/ 浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素 ...

  8. Vue中如何引入第三方icon库（阿里巴巴矢量图标库）

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  9. 如何在微信小程序中使用iconfont

    开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...

随机推荐

  1. [转]Docker学习之四：使用docker安装mysql

    本文转自:https://blog.csdn.net/qq_19348391/article/details/82998391 Docker学习之一:注册Docker Hub账号 Docker学习之二 ...

  2. [转]php 图片验证码生成 前后台验证

    本文转自:https://www.cnblogs.com/xiaoyezi/p/3541195.html 自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一 ...

  3. JPA、Hibernate、Spring data jpa之间的关系，终于明白了

    什么么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支 ...

  4. sql server查询语句条件判断字段值是否为NULL

    判断字段是否为null select * from table where c is null    select * from table where c is not null 判断字段是否为空 ...

  5. webapi 控制json的字段(key)显示顺序

    使用两个c#的特性: 加在类上的:[DataContract] 加在字段上的:[DataMember(Name = "ResultCode",EmitDefaultValue = ...

  6. surging+CentOS7+docker+rancher2.0 入门部署教程

    准备工作 开发环境  Visual Studio 2017 15.5 运行环境  虚拟机CentOS 7+Docker+Rancher 2.0+Consul+RabbmitMQ 项目下载地址  htt ...

  7. MyBatis：Pagehelper分页

    对于分页插件这里选择查询所有用户的信息,以列表返回 前端只需输入分页数的数据既可 service实现类也很方便,甚至我都开始有点喜欢上这种Example的SQL形式了. 最后页面调用url的json信 ...

  8. 表单时间和定时器this的指向

    1.针对表单的 form 表单  input 输入框 select 下拉列表  textarea 文本域 type 类型 radio 单选框 checkbox 多选框 password 密码框 but ...

  9. PHP常用函数总结（二）

    PHP常用函数总结 数学函数 1.abs(): 求绝对值 $abs = abs(-4.2); //4.2 数字绝对值数字 2.ceil(): 进一法取整 echo ceil(9.999); // 10 ...

  10. jfinal中excel表格导出

    今天工作中遇到了excel表格导出的操作,还好有写好的模板,不然我也是焦头烂额,下面记录一下excel表格导出的操作步骤,同时用来给正在学习jfinal的小伙伴一些参考和学习. 首先我们需要把表格查询 ...