微信小程序引用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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 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
php 动态添加记录
2009/03/10 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
简单了解django orm中介模型
2019/07/30 Python
django序列化serializers过程解析
2019/12/14 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
劳资专员岗位职责
2013/12/27 职场文书
小松树教学反思
2014/02/11 职场文书
初中生期末评语大全
2014/04/24 职场文书
大学新生入学教育方案
2014/05/16 职场文书
新农村建设典型材料
2014/05/31 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
欢迎新生标语2015
2015/07/16 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
python基于tkinter实现gif录屏功能
2021/05/19 Python
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python