好，忙，我懂.....

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

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

然后利用一个网站将这个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. 数据挖掘(二)——Knn算法的java实现

    1.K-近邻算法(Knn) 其原理为在一个样本空间中,有一些已知分类的样本,当出现一个未知分类的样本,则根据距离这个未知样本最近的k个样本来决定. 举例:爱情电影和动作电影,它们中都存在吻戏和动作,出 ...

  2. lua的table元类

    Lua中提供的元表是用于帮助Lua数据变量完成某些非预定义功能的个性化行为,如两个table的相加.假设a和b都是table,通过元表可以定义如何计算表达式a+b.当Lua试图将两个table相加时, ...

  3. Runtime详解（上）

    这篇关于Runtime讲解参考https://juejin.im/post/593f77085c497d006ba389f0以及https://www.jianshu.com/p/6ebda3cd80 ...

  4. [转]Angular: Hide Navbar Menu from Login page

    本文转自:https://loiane.com/2017/08/angular-hide-navbar-login-page/ In this article we will learn two ap ...

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

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

  6. 微信开发中网页授权access_token与基础支持的access_token异同 【转载、收藏】

    问题1:网页授权access_token与分享的jssdk中的access_token一样吗? 答:不一样.网页授权access_token 是一次性的,而基础支持的access_token的是有时间 ...

  7. 阿里分布式服务框架Dubbo的架构总结

    Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常简单的模 ...

  8. MySQL技巧（二）——无限级分类表设计

    无限级分类表的设计(掌握'自身连接') 类似图书这种,会有很多种分类,而且在现实生活中这种分类会无限的往下分,所以不可能每有一个分类就创建一个分类表.应该使用下面这种语句 DROP TABLE IF ...

  9. 汇编语言--微机CPU的指令系统（五）（比较运算指令）

    (7)比较运算指令 在程序中,我们要时常根据某个变量或表达式的取值去执行不同指令,从而使程序表现出有不同的功能.为了配合这样的操作,在CPU的指令系统中提供了各种不同的比较指令.通过这些比较指令的执行 ...

  10. angular ng-file-upload

    传送门:https://github.com/danialfarid/ng-file-upload#install <script src="angular(.min).js" ...