好，忙，我懂.....

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

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

然后利用一个网站将这个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. 利用Python测量滴水湖的水面面积

    美丽的滴水湖   美丽的滴水湖坐落在上海的东南角,濒临东海,风景秀丽,安静舒适,是旅游.恋爱的绝佳去处.笔者有幸去过一回,对那儿的风土人情留下了深刻的印象,如果有机会,笔者还会多去几次!   滴水湖是 ...

  2. [转]Laravel - Where null and Where not null eloquent query example

    本文转自: https://hdtuto.com/article/laravel-where-null-and-where-not-null-eloquent-query-example- if yo ...

  3. .Net 登陆的时候添加验证码

    一.ASPX 登陆界面验证码 1.登陆验证码图片和输入验证码框 <asp:TextBox ID="txtValiCode" runat="server" ...

  4. MVC Post 提交表单 允许他提交参数包含html标记的解决方法

    MVC Post 提交表单的时候,如果参数中包含html标记,则需要在控制器上方加上 [ValidateInput(false)]标记后就可以正常提交表单了例如: [HttpPost] [Valida ...

  5. double在输出为字符串的几种方法效率测试

    测试结果: double->none 366msdouble->long 161msdouble->long2 188msdouble->format 564msdouble- ...

  6. [nodejs] nodejs开发个人博客（一）准备工作

    前言 nodejs是运行在服务端的js,基于google的v8引擎.个人博客系统包含对数据库的增删查改,功能齐备,并且业务逻辑比较简单,是很多后台程序员为了检测学习成果,最先拿来练手的小网站程序.我也 ...

  7. mybatis_03_ mapper代理方式实现MyBatis的Dao编写

    不是用mapper代理方式也能够实现,但是不推荐 Mapper代理的开发方式,程序员只需要编写mapper接口(相当于dao接口)即可.Mybatis会自动的为mapper接口生成动态代理实现类. 不 ...

  8. stringMVC_09文件批量上传

    一.思路 在文件上传的基础上引入数组可以实现批量上传,只需要更改一下前段页面和controller类即可 文件上传: https://www.cnblogs.com/aihuadung/p/10167 ...

  9. List集合遍历整理

    遍历List集合的三种方式 0. 首先准备测试数据 List<String> list = new ArrayList<String>(); list.add("Ja ...

  10. Java基础IO流（四）序列化与反序列化

    对象的序列化与反序列化: 对象的序列化,就是将Object转换成byte序列,反之叫对象的反序列化. 序列化流(ObjectOutInputStream),是过滤流 -------writeObjec ...