好,忙,我懂.....

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

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

然后利用一个网站将这个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. [转]Cordova - 彻底搞定IOS编译!

    本文转自:https://www.cnblogs.com/sunylat/p/9946482.html 操作系统:OSX10.14 XCode:10.1 Cordova:8.1.2 假设已经配置好了C ...

  2. SharedPreferences存储读取数据

    存储 //创建SharedPreferences 存储用户名SharedPreferences sharedPreferences = getSharedPreferences("name& ...

  3. 从零开始学安全(五)●Vmware虚拟机三种网络模式详解

    vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式). NAT(网络地址转换模式) NAT(网络地址转换)vm ...

  4. Win10一周年纪念版,瞧一瞧Linux子系统

    Bash Bash是一个命令处理器,通常运行于文本窗口中,并能执行用户直接输入的命令.Bash还能从文件中读取命令,这样的文件称为脚本.和其他Unix shell 一样,它支持文件名替换(通配符匹配) ...

  5. 【Java每日一题】20170222

    20170221问题解析请点击今日问题下方的“[Java每日一题]20170222”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; import jav ...

  6. Java学习笔记之——static关键字

    static属于类的,不属于任何一个对象的 static关键字的应用场景: 1.静态代码块:在类下用static修饰的代码块 static{ 代码: } 只能执行一次,是在第一次使用类之前执行 类加载 ...

  7. C#设计模式之十六观察者模式(Observer Pattern)【行为型】

    一.引言 今天是2017年11月份的最后一天,也就是2017年11月30日,利用今天再写一个模式,争取下个月(也就是12月份)把所有的模式写完,2018年,新的一年写一些新的东西.今天我们开始讲“行为 ...

  8. SAP MM PO 中的Delivery Date并非保存在EKPO表里

    采购订单行项目中的deliverydate并非如同其它字段值一样是保存在采购订单行项目表EKPO里的, 而是从EKET表里抓取最早的Delivery Date作为该Item的delivery date ...

  9. JNI NDK (AndroidStudio+CMake )实现C C++调用Java代码流程

    JNI/NDK Java调用C/C++前言  通过第三篇文章讲解在实际的开发过程中Java层调用C/C++层的处理流程.其实我们在很大的业务里也需要C/C+ +层去调用Java层,这两层之间的相互调用 ...

  10. Spring集成ElasticSearch搜索引擎

    目录 前期安装 Maven支持库安装 添加log4j的配置文件 创建Client客户端 实现增删改查以及符合查询 实现查询数据 实现添加数据 实现删除数据 实现修改数据 实现复合查询数据 Elasti ...