微信小程序本地引用iconfont(阿里巴巴矢量图标库)
好,忙,我懂.....
首先把图标放进项目里(废话);
接下来把这些图标下载到本地(这里不介绍网络途径了,下载就完事了)
然后利用一个网站将这个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(阿里巴巴矢量图标库)的更多相关文章
- 微信小程序如何引用iconfont图标
最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face { font-family: 'iconfont'; src: url('iconfont.eot ...
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- 微信小程序如何使用iconfont阿里巴巴图标库?
步骤: 1.如图先下载: 2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...
- iconfont阿里巴巴矢量图标库批量保存
F12输入——var iconList = document.querySelectorAll('.icon-gouwuche1');for (var i = 0; i < iconList.l ...
- [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...
- [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题
React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size, line-height ,值为和 height 一样的高度. 例如: ...
- 阿里巴巴矢量图标库(iconfont)批量全选的方法
阿里巴巴矢量图标库: https://www.iconfont.cn/ 浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素 ...
- Vue中如何引入第三方icon库(阿里巴巴矢量图标库)
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- 如何在微信小程序中使用iconfont
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
随机推荐
- NSOperation讲解
本篇博客转自https://www.jianshu.com/p/4b1d77054b35 1. NSOperation.NSOperationQueue 简介 NSOperation.NSOperat ...
- js_html_input中autocomplete="off"在chrom中失效的解决办法
分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocomplete="new-password"(已实测,有效) 网上咱没有找到对其详细解释,但是发现16 ...
- 第一册:lesson fifty three。
原文: An interesting climate. A:where do you come from? B:I come from England. A:What's the climate li ...
- Hibernate的应用
//首先获得SessionFactory的对象 SessionFactory sessionFactory = new Configuration().configure().buildSession ...
- python爬虫scrapy项目详解(关注、持续更新)
python爬虫scrapy项目(一) 爬取目标:腾讯招聘网站(起始url:https://hr.tencent.com/position.php?keywords=&tid=0&st ...
- Python 语法笔记
1.else与while结合 while a>0: pass else: pass #当a<=0时执行 2.with语法,无需关闭文件,python自动关闭 with open('a.tx ...
- 提高 JavaScript 开发效率的高级 VSCode 扩展!
原文:提高 JavaScript 开发效率的高级 VSCode 扩展! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Quokka.js Quokka.js 是一个用于 JavaSc ...
- JavaScript中8个常见的陷阱
译者按: 漫漫编程路,总有一些坑让你泪流满面. 原文: Who said javascript was easy ? 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原 ...
- meta标签的http-equiv与content解析
meta是html语言head区的一个辅助性标签,以下是meta的http-equiv属性和content属性的一些介绍. http-equiv属性 指示服务器在发送实际的文档之前,要在传送给浏览器的 ...
- 2018-08-22 为中文API的简繁转换库添加迟到的持续集成
前两天在V2EX偶遇反馈帖第一次见以汉字命名的 Java 类 - V2EX, 于是复习了一下半年多没碰的项目program-in-chinese/zhconverter. 前文介绍了发布过程: 在Ma ...