微信小程序本地引用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呢? 一. ...
随机推荐
- sql查询语句时怎么把几个字段拼接成一个字段
sql查询语句时怎么把几个字段拼接成一个字段SELECT CAST(COLUMN1 AS VARCHAR(10)) + '-' + CAST(COLUMN2 AS VARCHAR(10) ...) a ...
- 数据结构——基于java的链表实现(真正理解链表这种数据结构)
原创不易,如需转载,请注明出处https://www.cnblogs.com/baixianlong/p/10759599.html,否则将追究法律责任!!! 一.链表介绍 1.什么是链表? 链表是一 ...
- Again Prime? No Time.(uva10870+数论)
Again Prime? No time.Input: standard inputOutput: standard outputTime Limit: 1 second The problem st ...
- Nginx之OCSP stapling配置
摘要: 正确地配置OCSP stapling, 可以提高HTTPS性能. 什么是OCSP stapling? OCSP的全称是Online Certificate Status Protocol,即在 ...
- 减少页面加载时间的n种方法
减少HTTP请求 1:减少调用其他页面.文件的数量 2:使用css spirit , 减少图片加载次数 压缩js,css代码 1:一般js.css文件中存在大量的空格.换行.注释,这些利于阅读,如果能 ...
- wepy框架须知
安装脚手架 . 安装构件工具 npm i wepy-cli -g .创建项目 wepy new 项目名 .实时编译 wepy build --watch 或 npm run dev .使用微信开发者工 ...
- qW3xT.2,解决挖矿病毒。
网站在运行期间感觉怪怪的,响应速度慢的不是一丁半点,带宽5M,不该是这样的呀 于是登录Xshell top命令 查看cpu情况如下 PID为3435的进程占用CPU过大,难道被病毒入侵了吗? 查看该进 ...
- js 分页插件(jQuery)
参考:http://www.jb51.net/article/117191.htm 侵删 css 部分 @charset "utf=8"; *{ box-sizing: borde ...
- zTree 节点文字过多处理方法
zTree setting.view.addDiyDom 方法可以实现自定义控件,指定节点显示内容.因此需要自己实现addDiyDom方法. 如果树节点不显示checkbox ,处理方法为: func ...
- Asp.Net MVC 利用ReflectedActionDescriptor判断Action返回类型
System.Web.Mvc.ReflectedActionDescriptor descriptor = filterContext.ActionDescriptor as System.Web.M ...