好，忙，我懂.....

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

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

然后利用一个网站将这个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. [转] javascript 保留两位小数 (且不四舍五入)

    本文转自:https://blog.csdn.net/qq_40171039/article/details/79729503 保留两位小数且不四舍五入: 方法一: var a = 2.461; va ...

  2. 第一册：lesson sixty three。

    原文: Thank you docter. A:How's Jim today? B:Better, thank you docter. A:Can I see him ,please? B:Cert ...

  3. C# 获取当前屏幕的宽高和位置

    上一篇博客<C# 获取当前屏幕DPI>,介绍了如何获取当前屏幕的DPI设置 本章主要介绍如何获取当前窗口所在屏幕的信息 当前屏幕信息 如果当前是单屏幕,可以直接获取主屏幕 var prim ...

  4. SpringBoot简介

    Spring Boot,简单讲就是牺牲项目的自由度来减少配置的复杂度(“契约式编程”思想,SpringBoot自动配置方案的指导思想).约定一套规则,把这些框架都自动配置集成好,从而达到“开箱即用”. ...

  5. A simple problem（湘大邀请赛）

    A simple problem Accepted : 61   Submit : 418 Time Limit : 15000 MS   Memory Limit : 655360 KB Probl ...

  6. Javascript继承2：创建即继承----构造函数继承

    //声明父类 function SuperClass(id){ //值类型公有属性 this.id = id; //引用类型公有属性 this.books = ['Html','Css']; } // ...

  7. 大数据Spark与Storm技术选型

    先做一个对比:   对比点 Storm Spark Streaming 实时计算模型 纯实时,来一条数据,处理一条数据 准实时,对一个时间段内的数据收集起来,作为一个RDD,再处理 实时计算延迟度 毫 ...

  8. idea中查看方法参数;查看类、方法、属性注释

    Ctrl+P:查看方法参数Ctrl+Q:查看类.方法.属性注释

  9. POJ 1704 Georgia and Bob(阶梯Nim博弈)

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11357   Accepted: 3749 Description Geor ...

  10. Mixing a dll boost library with a static runtime is a really bad idea错误的解决

    作者:朱金灿 来源:http://blog.csdn.net/clever101 同事在使用boost库时遇到一个问题,在编译时出现一个错误:Mixing a dll boost library wi ...