微信小程序引用iconfont图标的方法


Posted in Javascript onOctober 22, 2018

最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是:

@font-face {
 font-family: 'iconfont';
 src: url('iconfont.eot');
 src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 url('iconfont.woff') format('woff'),
 url('iconfont.ttf') format('truetype'),
 url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
 font-family:"iconfont";
 font-size:16px;font-style:normal;
 -webkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;
}

这是往常的写法,但是发现这样的写法要报错,后来查了一下,发现小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64,然后引用。

方法:

在阿里巴巴图标库下载下来以后,将iconfont.ttf转换即可。转换地址:https://transfonter.org/

这里贴一个简单的步骤:

微信小程序引用iconfont图标的方法
转换后的目录:微信小程序引用iconfont图标的方法
将css文件在外部引入所要用的.wxss文件中即可(@import ‘../../lib/style/lib.wxss';)

最后,就可以使用啦:

.icon:after{
 font-family: 'iconfont';
 font-weight: 500;
 font-style: normal;
 content: '\e698;'
}

总结

以上所述是小编给大家介绍的微信小程序引用iconfont图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
微信小程序时间戳转日期的详解
Apr 30 Javascript
ES6 十大特性简介
Dec 09 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
js实现动态增加文件域表单功能
Oct 22 #Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
js实现input密码框显示/隐藏功能
Sep 10 #Javascript
You might like
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JS常用知识点整理
2017/01/21 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
python字符类型的一些方法小结
2016/05/16 Python
PyQt5实现下载进度条效果
2018/04/19 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
python绘制随机网络图形示例
2019/11/21 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
五分钟演讲稿
2014/04/30 职场文书
国庆节活动总结
2014/08/26 职场文书
门球健将观后感
2015/06/16 职场文书
董事长开业致辞
2015/07/29 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang